从 Chrome 83 开始，您可以将链接 rel="preload" 与 font-display: optional 结合使用，以完全消除布局卡顿
通过优化渲染周期，Chrome 83 在预加载可选字体时消除了布局偏移。
将 <link rel="preload"> 与 font-display: optional 结合使用是确保在渲染自定义字体时不会出现布局卡顿的最有效方法。
浏览器兼容性
请查看 MDN 的数据，了解最新的跨浏览器支持信息：
字体呈现
布局偏移或重新布局是指网页上的资源发生动态变化，导致内容“偏移”。提取和渲染 Web 字体可能会直接导致布局发生变化，具体有两种方式：
- 回退字体被新字体替换（“未设置样式的文本闪烁”）
- 在将新字体渲染到网页中之前，会显示“不可见”文本（“不可见文本闪烁”）
CSS font-display 属性提供了一种通过一系列不同的支持值（auto、block、swap、fallback 和 optional）修改自定义字体渲染行为的方法。选择使用哪个值取决于异步加载字体的首选行为。不过，上述每种受支持的值都可以通过上述两种方式之一触发重新布局，直到现在！
可选字体
font-display 属性使用包含三个时间段的时间轴来处理需要先下载才能渲染的字体：
- Block：呈现“不可见”的文字，但在加载完成后立即切换到网络字体。
- 交换：使用后备系统字体呈现文本，但在网页字体加载完成后立即切换到该字体。
- 失败：使用回退系统字体渲染文本。
以前，使用 font-display: optional 指定的字体具有 100 毫秒的阻塞周期，但没有交换周期。这意味着，“不可见”文本会在切换到后备字体之前非常短暂地显示。如果字体未在 100 毫秒内下载完毕，则使用回退字体，并且不会发生替换。
font-display: optional 行为不过，如果字体是在 100 毫秒的阻塞期结束之前下载的，则会在网页上呈现并使用自定义字体。
font-display: optional之前行为在这两种情况下，无论是否使用后备字体，也无论自定义字体是否及时完成加载，Chrome 都会重新渲染页面两次。这会导致不可见文本出现轻微闪烁，并且在渲染新字体的情况下，还会出现布局卡顿，从而移动网页的部分内容。即使字体存储在浏览器的磁盘缓存中，并且可以在阻塞期结束之前顺利加载，也会发生这种情况。
优化已在 Chrome 83 中实现，可完全移除使用 <link rel="preload'> 预加载的可选字体的首次渲染周期。
相反，渲染会一直处于阻塞状态，直到自定义字体加载完毕或经过了一段时间。此超时时间目前设置为 100 毫秒，但为了优化性能，可能在不久的将来会发生变化。
font-display: optional 行为（不会出现不可见文本闪烁）
font-display: optional 行为（不会出现不可见文本闪烁）在 Chrome 中预加载可选字体可消除布局卡顿和未设置样式的文本闪烁。这符合 CSS 字体模块级别 4 中规定的必需行为，即可选字体绝不应导致重新布局，用户代理可以延迟渲染一段合适的时间。
虽然不必预加载可选字体，但这样做可以大大提高在第一个渲染周期之前加载该字体的几率，尤其是在浏览器缓存中尚未存储该字体的情况下。
总结
Chrome 团队很想了解您在应用这些新优化后预加载可选字体的体验！如果您遇到任何问题或想提出任何功能建议，请提交问题。