概述

字体通常是加载时间较慢的大文件，一些浏览器在字体加载之前隐藏文本，这会导致“不可见文本闪烁 (FOIT)”，让用户感觉网站打开速度过慢，影响用户阅读体验。

解决方案

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

加载自定义字体时，避免文本不可见的最简单方法是临时显示系统字体。通过把font-display: swap在包含在@font-face样式中，可以保证在字体加载期间，所有文本都保持可见状态 。

@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告诉浏览器使用该字体的文本应该立即使用系统字体显示。自定义字体准备就绪后，它将替换系统字体。

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