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

【问题标题】：The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event资源 <URL> 已使用链接预加载进行预加载，但在窗口的加载事件后几秒钟内未使用
【发布时间】：2022-11-23 04:53:06
【问题描述】：

在我工作的网站上，我在外部服务器上托管了一些字体。在我的<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: 'Searchlight', serif;
}
我想有一个解决办法，因为我看到过立即（或非常快）加载字体的网站。在过去 30 分钟的搜索过程中，我没有发现任何对我有用的东西。

【问题讨论】：

标签： html css fonts

【解决方案1】：

这可能是因为字体的预加载路径和 css 路径不匹配，所以浏览器加载该字体两次。

你应该确保你的字体路径在预加载和 css 文件中是相同的。只有当您看到网络控制台中对每种字体只有一个请求时，您才会知道它正在工作。

我认为预加载中不允许使用查询参数。如果您有查询参数，请尝试删除它们。

例如错误的：

预加载字体路径：https://mywebsite.app/src/fonts/Australia%20Custom.woff2
CSS字体路径：https://mywebsite.app/src/fonts/Australia%20Custom.woff2?v=1

好的：

预加载字体路径：https://mywebsite.app/src/fonts/Australia%20Custom.woff2
CSS字体路径：https://mywebsite.app/src/fonts/Australia%20Custom.woff2

我希望这会有所帮助，问候！

【讨论】：