链接预加载不能避免字体加载重复

Posted 2023-03-07

【中文标题】链接预加载不能避免字体加载重复

【英文标题】：The link preload is not avoiding the font loading duplication

【发布时间】：2019-06-28 14:59:37

【问题描述】：

我阅读了link preload documentation。在 html 的 head 部分，我有

<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font">

稍后，我加载了一个font.css 文件，其中加载了完全相同的字体文件（检查url）：

@font-face 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("/css/fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

Chrome 上的错误？

但 Chrome 控制台会发出警告

资源https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as 值并且是有意预加载的。

实际上浏览器会两次加载同一个文件（第 1 行和第 3 行是指同一个文件）！

如何通过避免文件加载重复来使预加载工作？

【问题讨论】：

假设你的 font.css 在“几秒钟”内被加载，它可能是crbug.com/653088

@wOxxOm 感谢您的回复。似乎字体是一种特殊情况，必须提供跨域。

因此，警告消息和两次字体加载无关，即使字体加载一次并且在合理的时间内未使用，您也会收到此警告

【参考方案1】：

我解决了添加type="font/woff2" crossorigin="anonymous"的问题

<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Fonts are indeed a special case

如果您的网站的 CORS 设置正确，只要您在元素上设置了 crossorigin 属性，就可以成功预加载跨域资源。

一个有趣的例子是字体文件，即使提取不是跨域的。由于各种原因，这些必须使用匿名模式 CORS 来获取（如果您对所有细节感兴趣，请参阅字体获取要求）。