PageSpeed Insights 诊断“确保文本在 webfont 加载期间保持可见”

Question

我正在对PageSpeed Insights 进行诊断

Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.
URL
    
Potential Savings
…v1/aWB4m0aac….woff2(fonts.gstatic.com)     10 ms
…v21/nuFvD-vYS….woff2(fonts.gstatic.com)    10 ms
…v13/6xK3dSBYK….woff2(fonts.gstatic.com)    10 ms

我正在尝试通过更改来纠正它

  <link rel="stylesheet" href="https://fonts.googleapis.com" />

到

<link rel="stylesheet" href="https://fonts.googleapis.com/display=swap" />

但这实际上会引发控制台错误

---

我知道PageSpeed Insights recommends to add font-display: swap 到@fontface，但我不知道@fontface 是什么。

我正在使用 Bootstrap 和 Gatsby

我知道还有gatsby-plugin-web-font-loader。有没有办法使用它来避免这种诊断？

---

这些都是 font-family 出现在我的程序中的所有时间。我用的是scss，所以大部分都是变量

我只在我的程序中指定了一次字体，我认为 bootstrap 会在其余时间选择字体

blockquote > p {
   font-family: 'Montserrat', sans-serif;
}

---

更新，我正在使用这个插件

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Montserrat`,
      `Helvetica Neue`,
      `Helvetica`,
      `Arial`
      
    ],
    display: 'swap'
  }
},

Answer 1

你犯了一个小错误。

应该是

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=TheFontYouWantToUse&display=swap />

如果您按照示例中所示执行正斜杠，则会导致 404 未找到，因此会出现控制台错误。将其替换为 URL 参数 (&)，它应该可以正常工作。

@fontface 只是从样式表中加载字体的一种方式。

例如，在您的主 CSS 文件中，您可以添加以下内容，这也会加载字体。注意 font-display 属性设置为 swap。

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

Answer 2

@font-face 是一个允许您使用多个font-family 规则而不是在每个选择器中加载它的规则。

在 Gatsby 的所有字体插件中，我推荐 gatsby-plugin-google-fonts，因为它允许您在字体之间显示和交换。

 plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `limelight`,
          `source sans pro\:300,400,400i,700` // you can also specify font weights and styles
        ],
        display: 'swap'
      }
    }
  ]

它非常有用，因为它可以在不影响显示的情况下预加载字体（由于 swap 属性）。

使用 Gatsby，<link rel="stylesheet" href="https://fonts.googleapis.com" /> 此配置是自动化的，因此您无需触摸它。最好使用插件预渲染它们，因为这是 Gatsby 的强大功能。