字体通常是加载速度较慢的大型文件。有些浏览器会在字体加载之前隐藏文本,从而导致出现不可见文本 (FOIT) 闪烁。
Lighthouse 字体显示审核如何失败
Lighthouse 会标记可能刷写不可见文本的任何字体网址:
![Lighthouse 的屏幕截图,以确保文本在网页字体加载审核期间保持可见](https://developer.chrome.google.cn/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=6&hl=el)
如何避免显示不可见文本
font-display
API 用于指示字体在 font-face
样式内使用时的显示方式。以下 font-display
值会指示浏览器在自定义字体尚未就绪时使用系统字体:
swap
optional
fallback
CSS 示例
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google Fonts 示例
将 &display=swap
/&display=optional
/&display=fallback
参数添加到 Google Fonts 网址的末尾:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
如何避免由延迟字体引起的布局偏移
暂时显示系统字体会将 FOIT 替换成一闪而过的无样式文本 (FOUT)。这可以通过更快地呈现内容来改进 FCP&LCP,但在自定义字体取代临时系统字体后,FOIT 和 FOUT 对 CLS 的影响相同。
通过将预加载项与 font-display: optional
结合使用,可以减轻字体加载对 CLS 的影响。
不过,过度使用预加载可能会对负载指标产生负面影响。我们建议您执行 A/B 测试,以确保预加载字体不会引入任何性能下降。
特定于堆栈的指南
Drupal
在主题中定义自定义字体时,请指定 @font-display
。
Magento
在定义自定义字体时指定 @font-display
。