预加载字体以加快网站速度,不要两次下载它们吗?

我想在此文件中预加载正在使用的两种字体: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中下载字体。所以它不起作用。结果在这里:

预加载字体以加快网站速度,不要两次下载它们吗?

如何归档仍下载两种字体但只能下载一次?并在字形网址中使用此预取缓存?

lglzn 回答:预加载字体以加快网站速度,不要两次下载它们吗?

尝试添加到链接

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>

它对我有用,并且字体文件仅下载了一次,我想需要它来确保它们完全相同...

本文链接:https://www.f2er.com/2629802.html

大家都在问