Javascript 预加载Google字体和CLS

我预装谷歌字体如下

然而，lighthouse仍然给了我151ms的累计布局变化，我可以看到字体闪烁。 为什么预加载不起作用

---

还有。如果我从display=swap改为optional，lighthouse会说“带有字体显示的字体：optional不会预加载”。这必须意味着它实际上不是预加载的

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

我看到你的便条上写着“显示：可选”不会预加载。如果您想在加载字体时让不可见的文本块保留字体位置，请尝试将“交换”更改为“块”。“可选”为用户提供浏览器权限，以选择浏览器默认设置或根据其连接等待加载自定义字体。两者都不会导致字体闪烁

下面的链接很好地解释了字体显示的值