因此，最近，我们一直在研究针对新的“核心网络生命力”优化我们的网站，并确定了与 flexbox 行相关的问题（已解决），这导致桌面的 CLS 得分不佳，而在移动设备上似乎被 Google Web Fonts 破坏了 CLS 分数。
当我们添加这个小代码时，一切看起来都很好。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（桌面）= 移动可能会更好......桌面上的一切都很好。
