[翻译]F2E大会上关于@font-face的分享

原文：http://www.nczonline.net/blog/2011/04/05/lessons-on-font-face-from-the-f2e-summit/
标题：Lessons on @font-face from the F2E Summit
作者：NCZakas
译文：F2E大会上关于@font-face的分享

上周我参与组织了Yahoo F2E大会，这次大会聚集了Yahoo全球各地的前端工程师，其中@font-face是本次大会最受关注的话题之一，我们讨论了它的种种优势和缺陷，好记性不如烂笔头，我得赶紧把这些知识点记录下来，本篇内容来自于 Matt Seeley 关于“yahoo.com/tablet”的专题分享“iPad版Yahoo首页实战”（Lessons from the Tablet Front Page），以及来自于Adam Wang关于面向未来的CSS3的专题分享“无名小站新版首页案例分析”（Case Study: Wretch New Front Page），在这里我只是将他们的分享做了摘录。

兼容性

如果你不清楚<video>和<audio>标签的兼容性问题的话，你可能也不会知道 @font-face 的兼容性情况，尽管在桌面浏览器中可以通过 OpenType、TrueType 和 WOFF 可以比较好的做到兼容，但在移动终端则没办法轻易做到兼容。iOS4.1 和较早的版本只支持 SVG 字体，而 Android 只支持 TrueType 字体。iOS4.2 及后续版本开始同时支持 OpenType、TrueType 和 SVG 字体。也就是说，要想兼容 iOS 和 Android，只要将 css 代码精简成如下模样即可：

@font-face {
    font-family: "Gotham Medium";
    font-weight: normal;
    font-style: normal;
    src: url(gothmed.ttf) format(truetype),
    url(gothmed.svg#id) format(svg);
}

也许这还不是最糟的，毕竟兼容性问题不止这么简单，因为在 IE9 中，src 属性不支持多值定义。比如上段代码会被错误的解析成：

@font-face {
    font-family: "Gotham Medium";
    font-weight: normal;
    font-style: normal;
    src: url(gothmed.ttf)%20format(truetype),%20url(gothmed.svg#id)%20format(svg);
}

看到没，整个 src 属性被 URL 转码。也就是说在 IE8 及以下版本的浏览器中，将会发起一个类似这个 URL 的请求：

/gothmed.ttf)%20format(truetype),%20url(gotmed.svg

我们看到#之后的字串被当成 URL 的 hash 部分，并不参于组成 HTTP 请求地址。这样的话，每次浏览页面都会造成一个404的请求。因此尽管在早期版本的IE中不支持src的多值定义，依然会发起一个 HTTP 请求。

为了解决这个问题，Matt 使用了 dataURI 来代替 TTF 字体文件，这样在IE8及更早版本的浏览器中就不会再发请求了。Matt 同样提及 dataURI 并不能代替 SVG 字体，因为 dataURI 的长度在 iOS 中受到了限制。

意外情形

Matt 同样指出了给 SVG 字体定义 text-overflow: ellipsis 样式时的意外情形，其他字体的这种样式定义是没问题的。当给 SVG 字体定义 text-overflow: ellipsis 的时候，所有的字符都莫名其妙的不见了，只剩下省略号。比如”My text…”最终显示成了”…”。

性能

说到性能，我通常会提到用户体验，以及更重要的关系户感官体验的性能(user-perceived performance)。Matt 和 Adam 在各自专题中都有提到事关@font-face的性能问题，Matt指出iOS中的文本样式短失效（FOUT）问题实际上是“无文本闪烁”，他发现尽管网页渲染完毕，使用网页字体的文本内容也会因为字体文件没有下载完成而显示为空，他进一步指出，字体的下载只有在使用网页字体的dom元素被渲染的时候才会开始。这里我们采用了一种hack的手法来将字体下载时机提前——将字体定义放在标签上，当然，更好的方式还有待进一步研究发掘。

网页字体的另一个性能问题是字体文件的大小，在美国我们可以肆无忌惮的使用网页字体，因为字体无非由26个英文字母和一些标点符号组成而已，Adam 提到在亚洲文字的字体文件则要庞大的多，有的甚至能达到4～5MB。因此，如果你想在亚洲网站中应用非标准的字体，你需要重新审视由此造成的性能问题。

小结

看起来我们还有很长的路要走，还需要更深入的研究在网速允许的情况下@font-face的应用，除了兼容性和性能问题之外，还有很多难题需要攻克，非常感谢 Matt 和Adam 的分享，让我们更好的理解围绕网页字体的页面设计原理。

posted at 2011-05-01