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

Katie Hempenius
Katie Hempenius

为什么您应该关注?

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

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

浏览器默认显示字体

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

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

立即显示文字

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

方法 1:使用 font-display

浏览器支持

  • Chrome:60。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:58。 <ph type="x-smartling-placeholder">
  • Safari:11.1. <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:等到自定义字体加载完毕后再使用自定义字体

浏览器支持

  • Chrome:35。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:41。 <ph type="x-smartling-placeholder">
  • Safari:10. <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 更易于使用。

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

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

验证

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

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

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