为什么您应该关注?
字体通常是需要一段时间才能加载的大型文件。为了解决此问题,某些浏览器会在字体加载之前隐藏文本(“闪烁的不可见文本”)。
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 更易于使用。
<ph type="x-smartling-placeholder">这样一来,在加载字体时,便需要注意一些其他事项。例如,所有字体可以一次加载,避免了在加载每种字体时使用多个布局。或者,网站可以选择不为网络连接速度较慢的用户或使用“保存数据”选项的用户加载字体。
验证
运行 Lighthouse 以验证网站是否正在使用 font-display: swap
显示文本:
- 按 Ctrl+Shift+J(在 Mac 上,按 Command+Option+J)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保类别列表中的效果复选框处于选中状态。
- 点击生成报告按钮。
确认确保文本在网页字体加载期间保持可见审核已通过。