我想优先下载网络字体并尝试了这个，根据https://leerob.io/blog/fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" />
<style type="text/css">
@font-face {
font-family: Inter;
font-display: optional;
src: url(https://leerob.io/fonts/inter-var-latin.woff2) format('woff2');
}
body {
font-size: 300%;
font-family: Inter;
}
</style>
</head>
<body>
lorem ipsum.
</body>
</html>
问题是浏览器下载了两次字体。codepen 在这里：https://codepen.io/snuup/pen/poPBBLg如果你刷新它，并过滤下载的字体（因为 codepen 本身有这么多文件），你会看到 2 个下载。
如何预加载字体并避免两次下载？
小智 7
奇怪的是，事实证明您需要将 crossorigin 属性添加到链接中，即使它位于同一站点上。这对我来说也没有意义，但它有效。
所以你的标签应该是
<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin />