返回

为网络打造更好的自定义字体体验

前端

页面字体一闪而过？这些标准可以助你一臂之力

导语

在浏览某些采用自定义字体的网站时，您可能遇到过这样的情况：页面结构和图片加载完毕，但文字区域一片空白。这种情况被称为 FOIT（Flash of Invisible Text，文字瞬间消失）。此外，还有一种类似的问题称为 FOUT（Flash of Unstyled Text，文字瞬间改变样式），指自定义字体尚未加载时，文本以备用字体显示，待字体加载完成后，文本再次渲染并采用自定义字体显示。这两种现象都会影响用户体验。

本文将介绍 W3C 制定的两个 CSS 字体加载标准：font-display 和 font-preload ，它们可以有效解决 FOIT 和 FOUT 问题。

font-display 标准

font-display 标准用于控制字体在加载过程中的显示行为。它支持以下值：

  • auto： 这是默认值，浏览器会根据自身情况决定如何显示字体。
  • block： 在字体加载完成之前，文本内容将被隐藏。
  • swap： 在字体加载完成之前，文本内容将使用备用字体显示，字体加载完成后再切换为自定义字体。
  • fallback： 在字体加载完成之前，文本内容将使用备用字体显示，字体加载完成后仍继续使用备用字体。
  • optional： 在字体加载完成之前，文本内容将使用备用字体显示，字体加载完成后切换为自定义字体，但如果自定义字体在一定时间内未加载完成，则文本内容将继续使用备用字体。

font-preload 标准

font-preload 标准用于控制字体资源的预加载行为。它支持以下值：

  • auto： 这是默认值，浏览器会根据自身情况决定是否预加载字体资源。
  • metadata： 浏览器将预加载字体资源的元数据，如字体名称、格式等信息。
  • swap： 浏览器将预加载字体资源，并在字体加载完成后立即使用该字体。

如何使用这些标准

通过合理使用 font-display 和 font-preload 标准，我们可以解决 FOIT 和 FOUT 问题，从而提升用户体验。以下是一些示例：

/* 使用 font-display: swap 解决 FOIT 问题 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2'),
       url('my-custom-font.woff') format('woff');
  font-display: swap;
}

/* 使用 font-preload: swap 预加载字体资源 */
<link rel="preload" href="my-custom-font.woff2" as="font" type="font/woff2" crossorigin>

结论

本文介绍了 font-display 和 font-preload 两个 CSS 字体加载标准，以及如何使用它们来解决 FOIT 和 FOUT 问题。通过合理利用这些标准，我们可以改善用户体验，确保自定义字体以最佳方式呈现。

常见问题解答

  1. font-display 和 font-preload 有什么区别？

    • font-display 控制字体加载过程中的显示行为，而 font-preload 控制字体资源的预加载行为。

  2. 我应该在所有情况下都使用 font-display: swap 吗？

    • 不一定。在不需要即时显示字体的情况下，可以选择其他选项，如 block 或 fallback。

  3. font-preload: swap 对性能有什么影响？

    • 预加载字体资源会增加初始页面加载时间，但可以加快后续对该字体的访问。

  4. 是否可以同时使用 font-display 和 font-preload？

    • 可以。这两者可以结合使用，以进一步优化字体加载体验。

  5. 我在实际项目中如何应用这些标准？

    • 在 @font-face 规则中指定 font-display 值，并在 元素中使用 标记预加载字体资源。