预加载 Google 字体和 CLS答案

【问题标题】：Preloading Google Fonts and CLS预加载 Google 字体和 CLS
【发布时间】：2021-04-02 03:55:18
【问题描述】：

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

<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">

但是，灯塔仍然给我 151 毫秒的累积布局移位，我可以看到字体闪烁。为什么预加载不起作用？

还有。如果我从 display=swap 更改为 optional，lighthouse 会说“带有 font-display 的字体：未预加载可选字体”。这一定意味着它实际上没有预加载

【问题讨论】：

标签： javascript html css lighthouse

【解决方案1】：

导致字体闪烁的代码部分是“display=swap”。它首先显示浏览器后备字体，然后在从 Google 字体接收到您的自定义字体后切换到该字体。

我看到您的说明显示：可选不会预加载。如果您想要一个不可见的文本块在加载时为您的字体保留一个位置，请尝试将“交换”更改为“块”。 “可选”允许用户的浏览器选择浏览器默认值或等待您的自定义字体根据他们的连接加载。两者都不会导致字体闪烁。

下面的链接很好地解释了 font-display 的值。

https://css-tricks.com/almanac/properties/f/font-display/#values

【讨论】：