什么是正确的字体加载顺序？

Question

Paul Irish建议加载字体的“防弹”方式是首先渲染EOT，然后是WOFF、TTF，最后是SVG。

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

来源：http://www.html5rocks.com/en/tutorials/webfonts/quick/

然而，他没有解释为什么这是正确的顺序（我认为是性能）。有人可以详细说明吗？此外，质量差异是什么？例如，SVG 在 Chrome 中似乎产生更好的缩放/抗锯齿效果。

- alias51

---

不确定为什么eot必须放在第一位，可能是因为旧版IE只能读取第一个“src”语句。对于其余部分，我认为它们的顺序是按照最常见的使用方式排序的（用户最常使用的是FF、Chrome和IE9+，其次是Opera和Safari，然后是iOS）。 - bbuecherl

实际上，如果SVG文件放在最后，WebKit浏览器经常会抱怨。有一篇文章建议将SVG文件放在WOFF文件之前。 - drip

当我将SVG放在前面时，我在Webkit浏览器中遇到了字体渲染的致命错误。有时候字体可以正常工作，有时候则不行。 - damian

这篇博客文章(http://icomoon.io/#post/318)很棒，基本上Chrome存在一个bug，导致它不完全支持`ttf`或`woff`。如果你使用`svg`进行渲染，则可以正常工作，但其他浏览器不支持此功能。解决方法是使用webkit媒体查询。 - alias51

Answer 1

没有“正确的顺序”，也不是加载顺序，而是一个列表，每个浏览器都会选择其中一个字体资源进行加载 - 即它们支持的第一个字体（并且它就是这样工作的）。

EOT排在第一位，因为它是旧版本IE唯一支持的格式，但它的位置真的不重要。

WOFF通常被认为是网络字体的最佳格式。无论是否属实可能取决于意见、渲染程序和字体，但这是顺序背后的传统智慧。

TTF和SVG排在最后，因为有些浏览器只支持这些格式。如果它们排在前面，那么一些同时支持WOFF的浏览器可能会使用这些格式。

- Jukka K. Korpela

---

谢谢，第一个字体加载后是否还会加载其他字体类型？我认为不会。 - alias51

其他字体资源未加载。CSS字体模块3级规范指出：“[src]描述符指定包含字体数据的资源。[...]它的值是一个优先级排序的、逗号分隔的外部引用或本地安装的字体名称列表。当需要字体时，用户代理会遍历列出的引用集合，使用它可以成功激活的第一个引用。” - Jukka K. Korpela