尽管有 font-display:swap，但 Google PageSpeed Insights 关于 webfont 加载的警告答案

【问题标题】：Google PageSpeed Insights warning about webfont load in spite of font-display:swap尽管有 font-display:swap，但 Google PageSpeed Insights 关于 webfont 加载的警告
【发布时间】：2021-09-24 20:24:02
【问题描述】：

网页加载一个带有多个 @font-face 规则的 CSS 文件，例如

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/opensans/v26/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkWV0ewJER.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
font-display: swap;
}

如您所见，有 font-display:swap 声明，但是当我在 Google PageSpeed Insights 检查页面时，我仍然收到警告

确保文本在 webfont 加载期间保持可见

利用 font-display CSS 功能确保文本在 webfonts 时用户可见正在加载中。

为什么？

【问题讨论】：

解决了吗？我也面临同样的问题。
它消失了，但我不记得之后是什么

标签： css font-face pagespeed pagespeed-insights google-fonts

【解决方案1】：

建议您在 HTML 头标签中加载字体。我认为生成警告是因为您在 CSS 中定义了 URL。

【讨论】：

不，它没有帮助......