此页面由 Cloud Translation API 翻译。

避免在字体加载过程中显示不可见文本

Katie Hempenius

Barry Pollard

为什么您应该关注？

字体通常是需要一段时间才能加载的大型文件。为了解决此问题，某些浏览器会在字体加载之前隐藏文本（“闪烁的不可见文本”）。

Largest Contentful Paint (LCP) 可能会延迟等待文本渲染。如果要优化广告效果，请避免“闪烁的不可见文字”(FOIT) 的样式，并使用系统字体立即向用户显示内容，这样就会产生“无样式文本闪光”(FOUT)。

浏览器默认显示字体

以下是常见浏览器的默认字体加载行为：

浏览器	字体未准备就绪时的默认行为...
Chrome 和 Edge	文字将最多隐藏 3 秒钟。如果文本仍未准备就绪，使用系统字体，直到字体准备就绪，然后换掉字体。
Firefox	文字将最多隐藏 3 秒钟。如果文本仍未准备就绪，使用系统字体，直到字体准备就绪，然后换掉字体。
Safari	在字体就绪之前隐藏文本。

立即显示文字

本指南概述了两种尽快显示文字的方法：第一种方法很简单，并且具有良好的浏览器支持。第二种方法比较深入，但可能会为您提供更多选项。您的网站的最佳选择取决于您的要求。

方法 1：使用 `font-display`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

font-display 是一个用于指定字体显示策略的 API。swap 用于告知浏览器使用此字体的文本应立即以系统字体显示。自定义字体准备就绪后，系统就会交换系统字体。

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

如果浏览器不支持 font-display（尽管所有现代浏览器都支持），则会继续遵循其默认行为来加载字体。

方法 2：等到自定义字体加载完毕后再使用自定义字体

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

再多做一点工作，可以考虑采用自定义程度更高的方法。

此方法分为三个部分：

不要通过重构 CSS 在初始网页加载时使用自定义字体，以免在一开始使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
使用 CSS Font Loading API 检测自定义字体的加载时间
更新页面样式以使用自定义字体。

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

这也可以借助 FontFaceObserver 库来实现，有些人发现此 API 更易于使用。

这样一来，在加载字体时，便需要注意一些其他事项。例如，所有字体可以一次加载，避免了在加载每种字体时使用多个布局。或者，网站可以选择不为网络连接速度较慢的用户或使用“保存数据”选项的用户加载字体。

验证

运行 Lighthouse 以验证网站是否正在使用 font-display: swap 显示文本：

按 Ctrl+Shift+J（在 Mac 上，按 Command+Option+J）打开开发者工具。
点击 Lighthouse 标签页。
确保类别列表中的效果复选框处于选中状态。
点击生成报告按钮。

确认确保文本在网页字体加载期间保持可见审核已通过。