如何在 macOS Safari 中使用预加载字体？答案

【问题标题】：How to use preloaded fonts in macOS Safari?如何在 macOS Safari 中使用预加载字体？
【发布时间】：2021-07-22 01:39:04
【问题描述】：

在我的 Web 应用程序中，我使用预加载资源提示能够尽快以所需字体显示文本。这在基于 chromium 的浏览器中运行良好，但在 macOS Safari 中似乎不起作用。实际上，字体是使用 preload 下载的，但是当 CSS 解析器在 CSS 中找到第一次使用时，会再次下载。

大约之后。 3 秒，我在 macOS Safari 14.0.3 中收到此警告消息：

资源 https://localhost/app/fonts/Dosis-VariableFont_latin.woff2 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它不是无缘无故预加载的。

这是 html 部分（链接位于 html 的头部，在指向 CSS 文件的链接之前）：

<link 
  rel="preload"
  as="font"
  href="/app/fonts/Dosis-VariableFont_latin.woff2"
  type="font/woff2"
  crossorigin="anonymous"
/>

字体在 CSS 中应用如下：

/* latin */
@font-face {
  font-family: "Dosis VF";
  font-display: swap;
  src: url(/app/fonts/Dosis-VariableFont_latin.woff2) format("woff2-variations"),
    url(/app/fonts/Dosis-VariableFont_latin.woff2) format("woff2")
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@supports (font-variation-settings: normal) {
  some-selector {
    font-family: "Dosis VF", sans serif;
  }
}

字体从与网络应用程序相同的域下载（自托管）。

我的代码中是否存在导致 Safari 不使用预加载字体的问题？

是否存在（至少）告诉 Safari 不执行预加载的方法？（为了节省一些千字节/请求，我预加载了 2-4 种字体）

编辑：我让这个问题消失了，它似乎已经解决了。也许新版本的 Safari 有所帮助（14.1.2）？有时我可以在使用 Service Worker 时手动清除缓存后看到警告消息（但在 Service Worker 被禁用时没有警告消息）。

【问题讨论】：

你能解决这个问题吗？你得到更多关于这方面的信息了吗？

标签： html css fonts safari preload

【解决方案1】：

我让这个问题过去了，看来它自己已经解决了。也许新版本的 Safari 有所帮助（14.1.2）？有时我可以在使用 Service Worker 时手动清除缓存后看到警告消息（但在 Service Worker 被禁用时没有警告消息）。

【讨论】：