Question

我目前正在考虑使用Google提供的webfonts，但我仍然不知道采用哪种方式，因为互联网上有很多不同的意见。

我有以下选项：

Webfontloader by typekit和google
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; 
}

Webfont性能 - webfontloader vs preload

1 个答案: