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

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

如何避免显示不可见的文本？

加载自定义字体时避免显示不可见文本的最简单方法是临时显示系统字体。通过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告诉浏览器使用该字体的文本应该立即使用系统字体显示。自定义字体准备就绪后，它将替换系统字体。