预加载Google字体和CLS

Question

我正在按以下方式预加载谷歌字体

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;500;800&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;500;800&display=swap">

然而，Lighthouse 仍然显示了151ms的累积布局位移，并且我可以看到字体在闪烁。为什么预加载不起作用？

另外，如果我从 display=swap 更改为 optional， Lighthouse 就会显示“具有 font-display: optional 的字体未预加载”。这必须意味着它实际上没有被预加载。

- Glutch

Answer 1

你的代码中导致字体闪烁的部分是"display=swap"。它会先显示浏览器的备用字体，然后一旦从Google Fonts接收到自定义字体，就会切换到自定义字体。

我看到你的注释说"display:optional"不会预加载。如果你想要一个不可见的文本块来占位等待字体加载，可以尝试将"swap"改为"block"。"Optional"允许用户的浏览器根据他们的连接选择浏览器默认或等待自定义字体加载，两者都不会导致字体闪烁。

下面的链接很好地解释了"font-display"属性的值。 https://css-tricks.com/almanac/properties/f/font-display/#values

- Marsellus