javascript - 如何在字体加载和页面加载时避免页面跳转和FOUT

Question

我正在开发一个网站，但我无法托管该字体。所以它必须从外部资源加载。但是，它加载缓慢，并且由于字体不是标准字体，加载时会导致大量页面跳转。浏览器默认字体总是首先加载，当字体改变时，一切都会移动，页面的整个滚动高度也会改变。这是一个大问题，因为页面上的其中一个表单在您开始选择字段的位置发生了偏移，而当它跳转时您最终选择了错误的表单。

我曾尝试使用字体预加载，但发现浏览器严重缺乏支持。即使在应该支持它的谷歌浏览器上进行测试，它似乎也会失败并偶尔求助于浏览器默认字体。 (链接相对预加载...)

目前，我使用的是一个杂乱的 javascript 解决方案，该解决方案基本上隐藏页面直到字体加载，然后使用超时让浏览器有时间使用新字体呈现，然后再使页面再次可见。然后它使用另一个超时时间，该超时时间稍长一些，以防字体根本无法加载以将页面显示为备份。

感觉真的很不专业。我觉得这在用户端造成了不必要的额外延迟。必须有更好的方法来解决这个问题，但我没有找到。我无法为元素设置固定高度，因为表单中的某些内容和问题是用户生成的。我正在列出我目前正在使用的糟糕的内联代码。

document.body.style.visibility="hidden";
//the link element that loads the font currently has an id
var font=document.getElementById('font');
font.onload=function(){
    var timeout=self.setTimeout(function({
    document.body.style.visibility="visible";
},100);
}
var fallback=self.setTimeout(function(){
document.body.style.visibility="visible";
},1000);

我不介意使用当前解决方案获得的结果。但我觉得肯定有更好的方法来解决这个问题？

Answer 1

我同意您的评估，即客户端的延迟是不理想且不必要的。 Case studies Google 和 BBC 发现加载时间的每一秒都会使跳出率(仅访问一个页面后离开网站的人数)增加 10-20%。

可以用来减少加载时间的一种策略是缩小加载的字符集。如果您自己托管字体，将字体分段并在 @font-face 定义中使用 unicode-range 值将是实现此目的的最佳方式。一些 vendor 喜欢谷歌字体 allow you to do this以及查询字符串参数。这可以显着减少客户端必须加载的未使用、不需要的字形(例如，外来字符和特殊字符)的数量。

至于减少 FOUT，您可以尝试的一件事是将罗马(常规)样式下载到您的机器上，将其编码为 base-64，然后将其直接嵌入到您的页面样式中，例如，

@font-face {
    font-family: MyFontName;
    src: url('data:application/x-font-woff;charset=utf-8;base64, <font data> ') format('woff');
    font-weight: normal;
    font-style: normal;
}

因为普通字体样式直接集成到您的 HTML/CSS 内容中，所以它的加载时间是微不足道的。最重要的是，当浏览器只接收到常规样式时，它们会自动生成自己的粗体和斜体版本。您可以利用此行为并将其用作适当样式的替代品，直到它们加载为止。

此外，如果您还没有这样做，请查看不同的网络字体格式，例如 WOFF2 ，以及像 Brotli 这样的压缩方法(WOFF2 使用)。

这里有一些资源，详细介绍了这些方法和其他方法:

• A Comprehensive Guide to Font LoadingStrategies

• FOUT, FOIT, FOFT