通过预加载可选字体防止布局偏移和不可见文本闪烁 (FOIT)

通过集合保持井井有条 根据您的偏好保存内容并进行分类。

从 Chrome 83 开始，link rel="preload" 和 font-display: optional 可以结合使用，以完全消除布局抖动

通过优化渲染周期，Chrome 83 消除了预加载可选字体时的布局偏移。将 <link rel="preload"> 与 font-display: optional 结合使用是保证在渲染自定义字体时不会出现布局抖动的最有效方法。

浏览器兼容性

查看 MDN 的数据，了解最新的跨浏览器支持信息

• <link rel="preload">
• font-display

字体渲染

当网页上的资源动态更改时，就会发生布局偏移或重新布局，从而导致内容“偏移”。获取和渲染 Web 字体可能会通过以下两种方式之一直接导致布局偏移

• 后备字体被新字体替换（“未设置样式的文本闪烁”）
• 在将新字体渲染到页面中之前，显示“不可见”文本（“不可见文本闪烁”）

CSS font-display 属性提供了一种通过一系列不同的支持值（auto、block、swap、fallback 和 optional）修改自定义字体渲染行为的方法。选择使用哪个值取决于异步加载字体的首选行为。然而，直到现在，所有这些支持的值都可能以上面列出的两种方式之一触发重新布局！

可选字体

font-display 属性使用三个时间段的时间线来处理在渲染之前需要下载的字体

• Block： 渲染“不可见”文本，但在 Web 字体完成加载后立即切换到该字体。
• Swap： 使用后备系统字体渲染文本，但在 Web 字体完成加载后立即切换到该字体。
• Fail： 使用后备系统字体渲染文本。

以前，使用 font-display: optional 指定的字体具有 100 毫秒的阻止期，且没有交换期。这意味着“不可见”文本会在非常短暂的时间内显示，然后切换到后备字体。如果字体未在 100 毫秒内下载，则会使用后备字体，并且不会发生交换。

但是，如果字体在 100 毫秒阻止期完成之前下载，则自定义字体将在页面上渲染和使用。

在两种情况下，Chrome 都会重新渲染页面两次，无论是否使用后备字体，或者自定义字体是否及时完成加载。这会导致不可见文本的轻微闪烁，以及在新字体渲染的情况下，导致布局抖动，从而移动页面的某些内容。即使字体存储在浏览器的磁盘缓存中并且可以在阻止期完成之前很好地加载，也会发生这种情况。

优化已在 Chrome 83 中实现，以完全删除使用 <link rel="preload'> 预加载的可选字体的第一次渲染周期。相反，渲染会被阻止，直到自定义字体完成加载或经过一定的时间。此超时时间段目前设置为 100 毫秒，但将来可能会更改以优化性能。

在 Chrome 中预加载可选字体消除了布局抖动和未设置样式的文本闪烁的可能性。这与 CSS 字体模块级别 4 中指定的必需行为相匹配，其中可选字体永远不应导致重新布局，用户代理可以延迟渲染一段合适的时间。

虽然预加载可选字体不是必需的，但它极大地提高了字体在第一次渲染周期之前加载的可能性，尤其是在字体尚未存储在浏览器的缓存中的情况下。

结论

Chrome 团队有兴趣了解您在使用这些新优化功能预加载可选字体的体验！如果您遇到任何问题或想提出任何功能建议，请提交 问题。