CSS 中使用网络字体

现在，直接在网页中指定存放在网络中的字体是可能的，这就是所谓的 Web Fonts。

首先我们来看看都有那些网络字体格式是浏览器支持的：

（1）TrueType 格式，文件后缀为 ttf。这是常用矢量字体中最古老的一种。

（2）OpenType 格式，文件后缀为 otf。这是 TrueType 字体格式的替代版。

（3）EOT 格式，文件后缀为 eot。全名 Embedded Open Type，是微软针对网络情形改进的字体格式。

（4）WOFF 格式，文件后缀为 woff。全名 Web Open Font Format，是 Mozilla 基金会在 2009 年推出的字体格式，很快 Firefox 3.5，Chrome 6.0，IE 9.0，Opera 11.10，Safari 5.1 等主流浏览器都开始支持这种字体格式了。

（5）SVG 格式，后缀为 svg。SVG 是一种矢量图形的格式，同时也可以作为字体格式。Chrome 4+，Opera 10+，Safari 3.1+ 等浏览器支持这种格式的字体，但是 IE 和 Firefox 不支持。

使用网络字体的方法也很简单，只需要在 CSS 中指定 @font-face 属性就可以了。例如：

@font-face {
    font-family: 'Outliner';
    src: url('http://example.com/outliner.ttf');
}

但是不同浏览器支持的字体格式不同，实际上我们需要准备多种字体，然后按照下面的方式来载入：

@font-face {
    font-family: 'Outliner';
    src: url('outliner.eot');
    src: url('outliner.eot?#iefix') format('embedded-opentype'),
         url('outliner.woff') format('woff'),
         url('outliner.ttf') format('truetype'),
         url('outliner.svg#outliner') format('svg');
    font-weight: normal;
    font-style: normal;
}

上面的代码除了考虑跨浏览器（包括 IE9 的兼容模式），还保证浏览器不会发起多余的 HTTP 连接。原因可以看参考资料中 Fontspring 的详细说明。

注意在 Firefox 和 IE 9+ 中不允许跨域使用网络字体，这个需要在字体服务器中设置 CORS 才能解决。在 Firefox 中打开本地网页，如果 @font-face 的 src 中带有..，例如 src('../font/myfont.woff')，仍然无法使用该字体。

还有一个问题，就是各种网络字体的 MIME-Type 是什么。EOT 字体和 SVG 字体有正式的 MIME-Type，分别为 application/vnd.ms-fontobject 和 image/svg+xml。其它几种网络字体暂时还没有正式的 MIME-Type，因此各种用法都有，一片混乱。不过暂时用 application/octet-stream 应该不会出什么问题。对于 EOT 字体，W3C 已经计划注册它的 MIME-Type 为 application/font-woff。

参考资料：
[1] Web字体格式介绍及浏览器兼容性一览
[2] @font-face - Mozilla Developer Network
[3] Correct MIME Type for CSS Web Fonts
[4] Web Fonts: No MIME Types, No Problem
[5] IANA | MIME Media Types
[6] Mime type for WOFF fonts?
[7] Register an Internet Media Type for a W3C Spec
[8] WOFF File Format 1.0
[9] Create Your Own @font-face Kits | Font Squirrel
[A] Bulletproof @font-face syntax - Paul Irish
[B] The New Bulletproof @Font-Face Syntax | Fontspring
[C] Further Hardening of the Bulletproof Syntax | Fontspring

[YAML] Update: 2013-12-01 11:07:00