字体加载和页面加载时如何避免页面跳转和FOUT答案

【问题标题】：How to avoid page jump and FOUT during font loading and page loading字体加载和页面加载时如何避免页面跳转和FOUT
【发布时间】：2019-08-07 17:14:17
【问题描述】：

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

我尝试过使用字体预加载，只是为了发现浏览器严重缺乏支持。即使在应该支持它的谷歌浏览器上进行测试，它似乎也会失败并偶尔求助于浏览器默认字体。（链接rel预加载...）

目前，我正在使用一个混乱的 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);

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

【问题讨论】：

我同意您的评估，即客户端的延迟是不理想且不必要的。研究表明，在有意义的渲染之前every second the user has to wait 会显着提高跳出率。您是否考虑过可能缩小加载 unicode-range 的字符集？您可以阅读此策略和其他策略 here 和 here。
刚刚看了链接。完全有效，它会加载得更快，特别是因为实际上我只是使用 A-Z 和 1-9 等，所以字符范围相当有限。谢谢英语呵呵。
哦，是的，关于如何避免 FOUT - 无格式文本闪烁的任何想法？因为它似乎总是在加载自定义字体之前加载默认字体。
归根结底，如果您无法从外部提供商加载字体，那么您的双手可能会有些束缚。我创建了一个答案，其中包含有关潜在妥协解决方案的更多详细信息。

标签： javascript fonts preloading

【解决方案1】：

我同意您的评估，即客户端的延迟是不理想且不必要的。 Google 和 BBC 的 Case studies 发现，加载时间的每一秒都可以将跳出率（仅访问一页后离开网站的人数）提高 10-20%。

您可以用来减少加载时间的一种策略是缩小您加载的字符集。如果您自己托管字体，则分割字体并在您的@font-face 定义中使用unicode-range 值将是实现此目的的最佳方式。一些提供程序，例如带有查询字符串参数的 Google Fonts 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 使用）。

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

【讨论】：