用 CSS3 @font-face 嵌入字体

今天刚发现牛人 Mark Pilgrim 正在写的 Dive Into HTML5，对网站上标题的字体很感兴趣，查了一下，是 Essays 1743.

这个字体以 LGPL 协议发布，并没有普及到大部分计算机上，所以需要用到 CSS3 的字体嵌入技术，Cross Browser Font Embedding with the CSS3 @font-face selector 一文详细讲解了跨浏览器的解决办法。

我已经把本站的头部标题改成使用这个字体，如果你没有看到可能是因为缓存的问题，请刷新一下浏览器。(update: 看久了感觉不太舒服，于是已经换掉了).

上面提到的教程其实挺麻烦的，主要是 IE 仅支持 eot 格式字体文件。由于我是复制 Dive Into HTML5 的样式，于是直接从那儿把字体文件下载到我服务器上，再把 CSS 代码搬过来就可以了。

@font-face 定义：

@font-face {
  font-family: "Essays 1743";
  src: url("/static/font/essays1743-min.eot");
  src: local("Essays 1743"), url("/static/font/essays1743-min.ttf")
}

在标题应用该样式：

#header-title {
  font-family: "Essays 1743";
  ...
}

当然了，嵌入字体的做法对中文来说不大适用，因为一个中文字体文件少说几个到十几个 MB, 用户不能忍受，我们的服务器也不一定能够忍受。所以对中文来说，如果只是想标题使用特殊字体，最好做成图片。而这个英文字体文件只有 30 多 KB，和一张图片的大小差不多，如果有大量的文字需要使用该字体，存储、带宽这方面就划算得多了。