资源 <URL> 已使用链接预加载进行预加载，但在窗口加载事件后几秒钟内未使用

Question

资源 <URL> 已使用链接预加载进行预加载，但在窗口加载事件后几秒钟内未使用

lia*_*bel 20 html css fonts

在我正在开发的网站上，我在外部服务器上托管了一些字体。在我的中<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" />

Run Code Online (Sandbox Code Playgroud)

我尝试将其放在主样式表的上方和下方。我也尝试将 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: 'Searchlight', serif;
}

Run Code Online (Sandbox Code Playgroud)