问题描述
因此，最近，我们一直在考虑针对新的“核心网络要素”优化我们的网站，并查明了与flexBox行相关的问题（已解决），这导致桌面版和移动版的CLS评分很差似乎是Google网络字体破坏了CLS得分。
添加此小代码后，一切看起来都不错。 CLS得分是0。当我们使用Google Web字体时，得分是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和其他文章中建议的可选值，这些值均未影响CLS得分，尽管似乎没有FOUT（使用节流的“快速3G测试“。）。
我们还尝试了自托管所有字体，但这些字体实际上也没有用。
不过，我们仍然相信这与字体有关，因为当我们应用上面的CSS时，CLS得分是0。这是我们想要的，但我们仍然希望使用webfonts。另外，当我们更改＆display = swap值时，我们还会在Lighthouse中收到另一个“警告”，建议使用交换功能以获得更好的用户体验，但这是导致CLS问题的原因...有什么想法吗？
这是结果，只有上述简单的更改（CSS）。
得分：94（移动电话）-93（桌面）=不错..！
并且这没有上面的CSS和Google webfonts。
得分：69（移动设备）-91（台式机）=移动设备可能会更好。.在台式机上一切都很好。
解决方法
以下是我所知道的用于处理此问题的两种解决方案：
设置后备字体的样式以匹配网络字体，并在网络字体加载时使用 [CSS 字体加载 API] 更改类。
有关使用 here 在加载特定字体时启动回调的示例，请参阅 Font Loading API。您可以使用工具 like this one 将后备字体与网络字体相匹配。
在后备字体上使用 chrome 的 @font-face 描述符覆盖以匹配 webfont
Font descriptors override 刚刚在 chrome 87 中出现，它们让您执行与选项 1 相同的功能，但不需要单独的类和 JavaScript，您只需在 @font-face 中定位特定的字体系列. 缺点是在撰写本文时仅在 chrome 87 中可用。