为什么您应该关注？
字体通常是需要一段时间才能加载的大型文件。为了解决此问题，某些浏览器会在字体加载之前隐藏文本（“闪烁的不可见文本”）。
Largest Contentful Paint (LCP) 可能会延迟等待文本渲染。如果要优化性能，您需要避免“不可见文本闪烁”(FOIT)，而应立即使用系统字体向用户显示内容，这会生成“无样式文本闪烁”(FOUT)。
浏览器默认显示字体
以下是常见浏览器的默认字体加载行为：
| 浏览器 | 字体未准备就绪时的默认行为... |
|---|---|
| Chrome 和 Edge | 文字将最多隐藏 3 秒钟。如果文本仍未准备就绪，则在字体准备就绪之前，它会使用系统字体，然后换掉字体。 |
| Firefox | 文字将最多隐藏 3 秒钟。如果文本仍未准备就绪，则在字体准备就绪之前，它会使用系统字体，然后换掉字体。 |
| Safari | 在字体就绪之前隐藏文本。 |
立即显示文字
本指南概述了两种尽快显示文字的方法：第一种方法很简单，并且浏览器支持很好。第二种方法比较深入，但可能会为您提供更多选项。您的网站的最佳选择取决于您的要求。
方法 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 显示文本：
- 按 Ctrl+Shift+J（在 Mac 上，按 Command+Option+J）打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保类别列表中的效果复选框处于选中状态。
- 点击生成报告按钮。
确认确保文本在网页字体加载期间保持可见审核已通过。