加载字体的正确顺序是什么？ [英] What's the correct order to load fonts in?

问题描述

Paul Irish建议加载字体的防弹方法是先渲染 EOT ，然后再渲染 WOFF ， TTF ，最后是 SVG 。

  @ font-face {
 font-family：'Tagesschrift'; 
 src：url（'tagesschrift.eot'）; / * IE 5-8 * / 
 src：local（'☺'），/ *偷偷摸摸的欺骗IE * / 
 url（'tagesschrift.woff'）格式（'woff'），/ * FF 3.6，Chrome 5，IE9 * / 
 url（'tagesschrift.ttf'）格式（'truetype'），/ * Opera，Safari * / 
 url（'tagesschrift.svg＃font'）格式'SVG'）; / * iOS * / 
} 
  

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

然而，他并没有解释为什么这是正确的顺序（我假设表现）。任何人都可以详述吗？另外，质量差异是什么？例如。 SVG 似乎在Chrome中产生了更好的缩放/抗锯齿功能。

解决方案

并不是一个正确的顺序，它不是一个加载顺序，而是一个列表，每个浏览器都要从中获取一个字体资源来加载 - 也就是第一个支持的字体资源。

EOT首先是因为它是唯一一个IE版本支持的老版本，但是它的地位并不重要。

WOFF通常被认为是网页字体的最佳选择。这是否是真的可能取决于意见，渲染例程和字体，但无论如何，这是顺序背后的传统观点TTF和SVG是最后列出的，因为一些浏览器只支持这种格式。如果它们放在更早的地方，这些格式可能会被一些支持WOFF的浏览器所使用。

Paul Irish suggests that the 'bullet proof' way to load fonts is to render EOT first, followed by WOFF, TTF, and lastly 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 */
}

Source: http://www.html5rocks.com/en/tutorials/webfonts/quick/

However, he doesn't explain why this is the correct order (I assume performance). Can anyone elaborate? Also, what are the quality differences? E.g. SVG appears to produce better scaling/antialiasing in Chrome.

解决方案

There is no "correct order", and it’s not a loading order but a list from which each browser is expected to pick up one font resource to load – namely this first one they support (and it works that way).

EOT comes first because it is the only one that old versions of IE support, but its position is really not important.

WOFF is generally said to the optimal for web fonts. Whether that is true may depend on opinions, rendering routines, and fonts, but it’s anyway the conventional wisdom behind the order

TTF and SVG are listed last because some browsers support only such formats. If they were placed earlier, those formats might get used by some browsers that support WOFF as well.

这篇关于加载字体的正确顺序是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！