本文向您分享如何通过 rel="preload" 来预加载 web 字体，从而避免出现无样式文本 (FOUT) 闪烁的情况。
在添加任何优化之前，首先测量网站的性能表现。
生成的谷歌 Lighthouse 报告将显示最大关键路径延迟下的资源获取顺序。
在上图所示的审计中，web 字体是关键请求链的一部分，并且会最后获取。关键请求链是指浏览器优先处理和获取资源的顺序。在此应用程序中，web 字体（Pacfico 和 Pacifico-Bold）通过 @font-face 规则定义，并且是浏览器在关键请求链中获取的最后一个资源。Web 字体通常会延迟加载，即在下载关键资源（CSS、JS）之前不会加载它们。
如何预加载 Web 字体？
为避免出现 FOUT 情况，您可以立即预加载需要的 web 字体。请在文档头为此应用添加 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 字体并不重要，因为它会格式化折叠下方的文本样式。
通过预加载，浏览器知道它需要提前下载这个文件。需要注意的是，如果使用不当，预加载可能会对未使用的资源发出不必要的请求，从而导致性能损耗。
您已成功复制微信号
leishi010
打开微信添加好友？
确定
