此 Codelab 向您展示了如何使用 rel="preload" 预加载 Web 字体，以移除任何未设置样式的文本闪烁 (FOUT)。
测量
在添加任何优化措施之前，先衡量网站的效果。
- 如需预览网站，请按查看应用，然后按全屏
。 - 按 `Control+Shift+J`（在 Mac 上为 `Command+Option+J`）打开 DevTools。
- 点击 Lighthouse 标签页。
- 确保在类别列表中选中效果复选框。
- 点击生成报告按钮。
生成的 Lighthouse 报告会在关键路径最大延迟时间下显示资源的提取顺序。
在上面的审核中，Web 字体是关键请求链的一部分，并且是最后提取的。关键请求链表示浏览器优先提取资源的顺序。在此应用中，网页字体（Pacfico 和 Pacifico-Bold）是使用 @font-face 规则定义的，是浏览器在关键请求链中抓取的最后一项资源。通常情况下，网页字体会延迟加载，这意味着只有在关键资源（CSS、JS）下载完成后，网页字体才会加载。
以下是应用中提取资源的顺序：
预加载 Web 字体
为避免出现 FOUT，您可以预加载立即需要的网页字体。在文档开头添加此应用的 Link 元素：
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
as="font" type="font/woff2" 属性会告知浏览器将此资源作为字体下载，并有助于确定资源队列的优先级。
crossorigin 属性用于指明是否应使用 CORS 请求提取资源，因为该字体可能来自其他网域。如果没有此属性，浏览器将忽略预加载的字体。
由于网页标头中使用了 Pacifico-Bold，因此我们添加了预加载代码，以便更快抓取它。预加载 Pacifico.woff2 字体并不重要，因为它用于设置折叠线下方的文本样式。
重新加载应用并再次运行 Lighthouse。查看关键路径延迟时间上限部分。
请注意 Pacifico-Bold.woff2 是如何从关键请求链中移除的。它是在应用中提取的。
预加载后，浏览器就会知道需要提前下载此文件。请务必注意，如果使用不当，预加载可能会对性能造成不利影响，因为它会对未使用的资源发出不必要的请求。