javascript - Webfont 性能 - webfontloader 与预加载

Question

我目前正在考虑使用来自 Google 的 webfonts，但我仍然不知道如何去做，因为互联网上有很多不同的意见。

我有以下选择:

Webfontloader通过 typekit 和谷歌

rel 属性 preload

在慢速 3G 网络上检查两者的性能时，我得到了类似的性能结果。 webfontloader 的缺点是 FOUT(无样式文本的 Flash)。有没有办法解决这个问题？预加载的缺点是许多浏览器不支持它。有退路吗？我找不到一个。也许你有另一种完全不同的方式。

谢谢你的帮助，

努鲁

Answer 1

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

https://onlinefontconverter.com/

然后将它们加载到站点 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 声明中将 font-weight 和 font-style 设置为 normal ，然后根据您希望元素中实际文本的样式再次添加。这将防止不同浏览器之间的渲染差异。如果您将实际不同的字体粗细下载为不同的文件，您将始终需要将它们设置为 normal .这样做还可以防止可怕的 FOUT。

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