确保文本在网页字体加载期间保持可见

字体通常是加载速度较慢的大型文件。有些浏览器会在字体加载之前隐藏文本，从而导致出现不可见文本 (FOIT) 闪烁。

Lighthouse 字体显示审核如何失败

Lighthouse 会标记可能刷写不可见文本的任何字体网址：

Lighthouse 的屏幕截图，以确保文本在网页字体加载审核期间保持可见

如何避免显示不可见文本

font-display API 用于指示字体在 font-face 样式内使用时的显示方式。以下 font-display 值会指示浏览器在自定义字体尚未就绪时使用系统字体：

  • swap
  • optional
  • fallback

CSS 示例

@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;
}

Google Fonts 示例

将 &display=swap/&display=optional/&display=fallback 参数添加到 Google Fonts 网址的末尾：

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

如何避免由延迟字体引起的布局偏移

暂时显示系统字体会将 FOIT 替换成一闪而过的无样式文本 (FOUT)。这可以通过更快地呈现内容来改进 FCP&LCP，但在自定义字体取代临时系统字体后，FOIT 和 FOUT 对 CLS 的影响相同。

通过将预加载项与 font-display: optional 结合使用，可以减轻字体加载对 CLS 的影响。 不过，过度使用预加载可能会对负载指标产生负面影响。我们建议您执行 A/B 测试，以确保预加载字体不会引入任何性能下降。

特定于堆栈的指南

Drupal

在主题中定义自定义字体时，请指定 @font-display。

Magento

在定义自定义字体时指定 @font-display。

资源