performance - 预加载字体以加快网站速度，不要下载两次？

Question

我想从这里的文件中预加载我正在使用的两种字体：https ://res.cloudinary.com/prodigy-official-de/raw/upload/v1581064331/www.prodigy-official.de%20resources/fonts/font .style.css

所以我尝试的是这里的代码：

<link rel="preload" href="https://res.cloudinary.com/prodigy-official-de/raw/upload/v1578333925/www.prodigy-official.de%20resources/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font">
<link rel="preload" href="https://res.cloudinary.com/prodigy-official-de/raw/upload/v1999999/www.prodigy-official.de%20resources/fonts/icomoon.woff2?10si43" as="font">

但！他在链接中预加载了这两种字体，然后在 font.style.css 中再次下载字体。所以它不起作用。结果在这里：

我如何存档以仍然下载这两种字体但只下载一次？并在字体网址中使用此预取缓存？

标签： performancefont-facepreloadprefetch

Answer 1

尝试添加到链接

type="font/woff2" crossorigin

所以这将是例如

<link rel="preload" href="https://res.cloudinary.com/prodigy-official-de/raw/upload/v1578333925/www.prodigy-official.de%20resources/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font" type="font/woff2" crossorigin>

它对我有用，字体文件只下载一次，我想它需要它来确保这些文件完全相同......

更正！ 上面的答案是正确的方法，这意味着您还必须定义 MIME 类型，以便文件不会被下载两次。但特别针对上面的问题，因为 FAIK，Cloudinary，只支持图像和视频！这意味着您可以从中提供一些原始文件，但不会使用正确的 MIME 类型检索它，而是将其作为文档下载，因此将下载两次...