使用 rel preload 预加载字体

Question

我正在使用<link> HTML 标记预加载字体，其中 rel 属性设置为 preload，如下面的 sn-p 中捕获的那样；

<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">

虽然通过加载字体可以按预期工作，但它会再次加载。

Google Chrome 浏览器中网络标签的屏幕截图显示字体加载两次 - 见下文；

此外，我在 Google Chrome 浏览器控制台选项卡中收到以下警告；

资源https://example.com/new-v8/fonts/32A0E0.woff2 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它 请确保它具有适当的“as”值并且是有意预加载的。

我做错了什么，我该如何解决？

Answer 1

我在使用自托管字体时遇到了这个问题。我是这样预加载的：

<link rel="preload" href="/fonts/SomeFont.woff2" as="font" type="font/woff2" crossorigin>

问题是 webpack 正在向编译的 css 字体路径添加哈希。

/* Before */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2") format("woff2");
}

/* After (Webpack Output) */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2?7d18a001dd0b6e04c2393") format("woff2");
}

所以我在预加载标签中添加了相同的哈希值，问题就解决了！

<link rel="preload" href="/fonts/SomeFont.woff2?7d18a001dd0b6e04c2393" as="font" type="font/woff2" crossorigin>

Answer 2

我玩得更开心了。除了这个警告之外，我发现我的浏览器同时下载了woff 和woff2，尽管它应该只下载woff2。在@font-face 中更改src 描述符的顺序对我有帮助。最后，我的解决方案看起来像这样：

<link href="/assets/fira-sans-condensed-v5-max-regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="/assets/bundle.css" rel="stylesheet">

@font-face
{
    font-display: swap;
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff") format("woff");
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff2") format("woff2");
}

Answer 3

就我而言，更改为 rel="stylesheet preload" 在 Chrome 上有效 -

这是工作的最低限度 -

<link rel="stylesheet preload" href="path/to/stylesheet" as="style" />

没有工作的是 -

<link rel="preload" href="path/to/stylesheet" as="style" />

Answer 4

我在尝试加载预加载谷歌字体时不断收到警告。

原来我错过了将字体作为一种样式从谷歌加载的事实。我通过设置as="style' 然后使用rel="stylesheet preload prefetch" 解决了这个问题。

参见下面的代码示例：

<link 
 as="style"
 rel="stylesheet preload prefetch" 
 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" 
 type="text/css" 
 crossorigin="anonymous" />

快乐编码 =)

Answer 5

不知道我是否要重新打开这里已经解决的问题，但我只想提一下，您需要将 rel="preload" 链接放在加载字体的源之后，例如CSS 文件。

Answer 6

您的 preload-Tag 采用参数“crossorigin”，必须为 Webfonts 提供该参数，即使它们与您的网站位于同一主机上。

见https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches 或https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#early-loading-of-fonts。