利用 font-display CSS 功能确保在加载 webfonts 时文本是用户可见的

在加载Web字体时，可能会出现一些问题，例如加载过慢或者加载失败，这会导致用户无法立即看到内容。为了避免这些问题，在CSS中使用font-display属性是一种有效的方法。

什么是 font-display 属性？

font-display是CSS的一个属性，用于控制字体在加载时的渲染方式。它可以确保即使在加载字体时出现问题，文本也能够立即呈现在用户的视觉范围内。在短时间内，它会使用备用字体或渲染系统字体来代替正在加载的字体。如果字体在加载完成之前可用，它会自动转换为所需的字体。

font-display 值的类型

font-display属性有五个可能的值：

• auto（默认值）：系统针对连接质量、请求速度、字体大小等因素采取最佳的显示策略；
• block：与auto值相似，但用户将看到一个“字体块”，直到目标字体完成为止；
• swap：加载字体之前使用Blink引擎下的“自动时间-out”技术来解决不必要的字体阻塞，并使用一个默认字体，目标字体完成以后立即替换；
• fallback：与swap值相似，但可以显示与目标字体相似的替换字体；
• optional：当字体下载的链接失败时，使用备选字体，但在性能和网络连接等因素优劣的情况下，更倾向于使用诸如“system-ui”之类的本机字体。

如何使用 font-display 属性？

将font-display属性添加到字体的@font-face规则中：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; 
}

使用 font-display 属性，可以确保用户在加载字体时能立即看到内容，提高用户体验。它还可以减少FOUT（会导致在使用Web字体时，文本在加载字体过程中“跳动”或在加载字体后“稳定”）的概率，因此可以提高页面设计的流畅性。

结论

使用font-display属性作为Web字体的一种有效方法，可以确保字体的正常加载，并增强用户体验。开发人员应该考虑在字体的@font-face规则中使用此属性，以确保内容能够适时地展示给用户。

如果有任何不清楚的地方，可以阅读更多关于 font-display 属性的官方文档。