Javascript Webfont性能-webfontloader与预加载

我目前正在考虑使用谷歌的webfonts，但我仍然不知道该怎么做，因为互联网上有很多不同的观点

我有以下选择：

• 由typekit和谷歌
• rel属性

在低速3G网络上检查两者的性能时，我得到了类似的性能结果。webfontloader的缺点是FOUT（未格式化文本的闪烁）。有没有办法绕过这个问题？预加载的缺点是很多浏览器都不支持它。有退路吗？我找不到。也许你有另一种完全不同的方式

谢谢你的帮助

---

Nuru

我一直发现加载webfonts最有效的方法是将其作为站点上的本地文件。只需使用.woff和.woff2文件，因为这些文件将覆盖IE8，除非有特殊原因使用.otf字体，然后使用一些好的备用系统字体。使用外部字体库的问题在于，如果访问者在不同站点上查看所述字体时，其缓存文件中的同一资源中的同一字体与使用外部字体库的用户相同，那么使用外部字体库的唯一性能优势就是。像Google fonts和Typekit这样的网站上有这么多字体，这不像你想象的那么可能，即使这样，我仍然没有看到任何性能上的改进。您可以从Google（当然也可以从许多其他来源）下载字体文件，然后在此处将其转换为woff和woff2：

然后将它们加载到站点CSS文件顶部的站点中。下面的例子是，如果我正在使用一种名为geo light的字体，并且字体文件位于我网站根目录中的

font

文件夹中

@font-face {font-family: 'geo-light';
    src: url('fonts/geo-light.woff2') format('woff2'), url('fonts/geo-light.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}

您必须在@font-face声明中将字体大小和字体样式设置为normal，然后根据您希望在元素中设置实际文本样式的方式再次添加。这将防止在不同浏览器之间呈现差异。如果将实际不同的字体权重下载为不同的文件，则始终需要将其设置为

normal

。这样做也可以防止可怕的FOUT

h1, h2, h3 {
    font-family: 'geo-light', sans-serif;
    font-weight: normal;
    font-style: normal; 
}