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

Katie Hempenius

Barry Pollard

为什么要关注短视频？

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

等待文本呈现可能会延迟 Largest Contentful Paint (LCP)。如果您要针对性能进行优化，则需要避免“短暂显示不可见文本”(FOIT)，并立即使用系统字体向用户显示内容，这会导致“无样式文本闪烁”(FOUT)。

浏览器默认设置

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

立即显示文字

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

方案 1：使用 font-display

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

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

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

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

方法 2：等待自定义字体加载完毕

如果稍微多做一点工作，可以考虑采用定制程度更高的方法。

此方法包括三个部分：

• 请不要在初始网页加载时使用自定义字体，方法是重构您的 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 显示文本：

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

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