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

Question

我读了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使用链接预紧预装但是从窗口的Load事件在几秒钟内不使用。请确保它有一个适当的as值，它是故意预装。

事实上浏览器加载相同的文件两次（第1和第3行是指恰好相同的文件）！

如何避免文件加载重复进行预压工作？

Answer 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属性预装crossorigin资源。

其中，这适用即使取一个有趣的情况是不跨来源是字体文件。由于种种原因，这些都使用匿名模式CORS中获取（见字体获取要求，如果你有兴趣在所有的细节）。