Com*_*ool 8 css preload typekit
有谁知道如何预加载 typekit 字体？现在我的计算字体是 Ariel，我收到错误：
资源https://use.typekit.net/dwg7avv.css已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as值并且是有意预加载的。
如果我进行正常导入，该字体就可以工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
body {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>
<body>
This is my font.
</body>
</html>
简而言之，您必须在 head 元素的末尾加载样式表。
要了解原因，您可以查看 mozilla 的文档https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
所以按照你的例子，它应该是这样的：
<head>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
<link rel="preload" href="main.js" as="script">
...
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>
我刚刚遇到了完全相同的问题，并且我确实用这个结构解决了
<!-- https://use.typekit.net & https://p.typekit.net is the font file origin (Lighthouse required both links from Adobe) -->
<!-- It may not have the same origin as the CSS file (https://use.typekit.net/pgd3inh.css) -->
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<link rel="preconnect" href="https://p.typekit.net" crossorigin />
<!-- We use the full link to the CSS file in the rest of the tags -->
<link rel="preload" as="style" href="https://use.typekit.net/dwg7avv.css" />
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" />
</noscript>
这篇文章帮助我解决了这个问题并知道为什么