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

字体通常是需要一段时间才能加载的大文件。一些浏览器在字体加载之前隐藏文本，导致不可见文本 (FOIT) 闪烁。

谷歌Lighthouse 字体显示审核如何失败？

Lighthouse标记任何可能闪烁不可见文本的字体 URL。

Lighthouse 的屏幕截图确保文本在 webfont 加载审核期间保持可见。

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

避免在加载自定义字体时显示不可见文本的最简单方法是临时显示系统字体。通过包含font-display: swap在您的@font-face风格中，您可以在大多数现代浏览器中避免 FOIT。

示例如下：

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

font-display API指定字体的显示方式。swap告诉浏览器使用该字体的文本应该立即使用系统字体显示。自定义字体准备就绪后，它将替换系统字体。

如果是引用的谷歌字体呢？

将&display=swap 参数添加到您的 Google 字体 URL 的末尾，示例如下：

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

浏览器支持：

值得一提的是，并非所有主流浏览器都支持font-display: swap，因此您可能需要做更多的工作来解决不可见文本问题。