在我正在开发的网站上，我在外部服务器上托管了一些字体。在我的 中<head>，我预加载字体，然后获取包含该@font-face字体的所有规则的样式表。样式表与字体位于同一服务器上。
我遇到的问题是，字体似乎在加载样式表后再次加载，根本没有利用预加载。
我在搜索如何修复此问题时看到一条评论，表明这是一个 Chromium 错误，但这种行为在 Firefox 中也会发生。
在控制台中我看到：
该资源是使用链接预加载来预加载的，但在窗口加载事件发生后的几秒钟内未使用。请确保它具有适当的
as值并且是有意预加载的。
我看到的行为是字体在页面加载后约 1 秒加载，而我的客户对此不满意。如果浏览器使用预加载的字体，则不会发生这种情况。
<link rel="preload" as="font" href="path to SearchlightRegular.woff2" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" as="font" href="path to SearchlightRegular.woff" type="font/woff" crossorigin="anonymous" />
<link rel="stylesheet" href="path to Searchlight.css" />
我尝试将其放在主样式表的上方和下方。我也尝试将 CSS 调用放入我的主样式表中。所有尝试都会产生相同的结果。
以下是 Searchlight.css 文件的内容。
@font-face {
font-family: 'Searchlight';
src: local('Searchlight'), local('SearchlightRegular'),
url('path to SearchlightRegular.woff2') format('woff2'),
url('path to SearchlightRegular.woff') format('woff'),
url('path to SearchlightRegular.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
.font-searchlight {
font-family: …