为什么要关注短视频?
字体通常是大型文件,需要一段时间才能加载完毕。为了解决此问题,有些浏览器会隐藏文字,直到字体加载(“不可见文字闪烁”)。
等待文本呈现可能会延迟 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 标签页。
- 确保已选中类别列表中的效果复选框。
- 点击生成报告按钮。
确认确保文本在网页字体加载期间保持可见审核已通过。