css - Google Webfonts 破坏 CLS 分数 (FOUT)

Question

因此，最近，我们一直在研究针对新的“Core web Vitality”优化我们的网站，并确定了与 flexbox 行(已解决)相关的问题，这导致桌面的 CLS 得分不佳，而在移动设备上，它似乎是破坏 CLS 分数的 Google Web 字体。
当我们添加这个小代码时，一切看起来都不错。 CLS 得分为 0。当我们使用 Google Web Font 时，得分为 0.326(仅适用于移动设备，桌面似乎没问题)。

<style>
*:not(i){
    font-family: sans-serif!important;
}
</style>

这是我们使用 Google 字体的方式。

<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Source+Sans+Pro:wght@400;900&display=swap">

为什么我们有 rel="stylesheet"和 rel="preload"？我们了解到，Firefox 等浏览器尚不支持后者，以前字体无法完全加载，这在我们添加样式表时也已修复。
我们尝试了什么？
我们已尝试将 &display=swap 值更改为其他文章中推荐的诸如 block、fallback、optional 之类的内容，但这些都没有影响 CLS 分数，尽管似乎没有 FOUT(使用节流的“Fast 3G”进行测试。) .
我们还尝试自托管所有字体，但也没有真正奏效。
尽管如此，我们仍然相信这与字体有关，因为当我们应用上面的 CSS 时，CLS 分数是 0。这就是我们正在寻找的，但我们仍然想要 webfonts。此外，当我们更改 &display=swap 值时，我们在 Lighthouse 中收到另一个“警告”，建议使用交换以获得更好的用户体验，但这就是导致 CLS 问题的原因......有什么想法吗？
以下是结果，仅进行了上述简单更改 (CSS)。
得分:94(移动)- 93(桌面)= 不错..!

这是没有上面的 CSS 和 Google webfonts。
得分:69(移动)- 91(桌面)= 移动可能会更好.. 在桌面上一切都很好。

Answer 1

以下是我知道的两种解决此问题的解决方案:
设置后备字体的样式以匹配 web 字体，并在 webfont 加载时使用 [CSS 字体加载 API] 更改类。
见 here有关使用 Font Loading API 的示例在加载特定字体时启动回调。您可以使用工具like this one将后备字体与网络字体相匹配。
使用 chrome 的 @font-face 描述符覆盖回退字体以匹配 webfont
Font descriptors override刚刚到达 chrome 87，它们让您执行与选项 1 相同的功能，但不需要单独的类和 JavaScript，您只需将特定的字体系列定位到 @font-face 中。
缺点是在撰写本文时，这仅在 chrome 87 中可用。