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

从 Chrome 83 开始，可以将 link rel="preload" 与 font-display: optional 组合来完全消除布局卡顿。

在 Chrome 83 中，字体加载有了新的改进，在预加载可选字体时可完全消除布局偏移和不可见文本闪烁 (FOIT)。

通过优化渲染周期，Chrome 83 在预加载可选字体时可消除布局偏移。将 <link rel="preload"> 与 font-display: optional 组合是保证渲染自定义字体时没有布局卡顿的最有效方法。

一、字体渲染

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

（1）后备字体与新字体交换（“无样式文本闪烁”）

（2）新字体渲染到页面前显示“不可见”文本（“不可见文本闪烁”）

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

二、可选字体

font-display 属性使用三段式的时间线来处理需要下载才能渲染的字体：

（1）**阻止：**渲染“不可见”文本，但在加载完成后立即切换到 Web 字体。

（2）**交换：**使用后备系统字体渲染文本，但在加载完成后立即切换到 Web 字体。

（3）**失败：**使用后备系统字体渲染文本。

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

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

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

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

虽然预加载可选字体不是必需的，但这大大提高了在第一个渲染周期之前加载它的机会，尤其是它尚未存储在浏览器的缓存中时。