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

Question

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

中找到第一次使用时会再次下载

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

The resource https://localhost/app/fonts/Dosis-VariableFont_latin.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

这是 html 部分（link 位于 html 的头部，在 link 到 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 不执行预加载的方法？（为了节省一些 kilobytes/requests，我预加载了 2-4 种字体）

编辑：我放弃了这个问题，它似乎已自行修复。也许较新版本的 Safari 有所帮助 (14.1.2)？有时我在使用 service worker 手动清除缓存后可以看到警告消息（但在禁用 service worker 时没有警告消息）。

Answer 1

我放弃了这个问题，它似乎已自行解决。也许较新版本的 Safari 有所帮助 (14.1.2)？有时我可以在使用 service worker 手动清除缓存后看到警告消息（但在禁用 service worker 时没有警告消息）。

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

How to use preloaded fonts in macOS Safari?

html

css

safari

fonts

preload