4

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

我有以下选择：

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

谢谢你的帮助，

努鲁

4

1 回答 1

0

我一直发现加载 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; 
}
于 2018-01-26T16:51:15.750 回答