变量 Webfont 未在 Safari 中加载答案

【问题标题】：Variable Webfont not loading in Safari变量 Webfont 未在 Safari 中加载
【发布时间】：2022-01-07 17:09:51
【问题描述】：

我有一个从我自己的服务器加载的可变字体

有时在 Safari（仅限 Safari）中，字体无法加载，我得到了备用字体。

如果我查看开发工具 > 网络 > 字体，它会显示

Failed to load resource: Origin --- is not allowed by Access-Control-Allow-Origin

如果我清除浏览器缓存并重新加载页面，则会加载正确的网络字体。

有没有人知道或知道为什么会发生这种情况

【问题讨论】：

标签： safari webfonts

【解决方案1】：

由于没有太多信息可用于调试此问题。您可以按照以下方法解决您的问题：

使用自定义字体时，请确保在 @font-face 中包含所有格式

@font-face {
 font-family: "Fira Sans";
 src: url('fonts/fira/eot/FiraSans-Regular.eot');
 src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
      url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
      url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
      url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
}

你也可以preload你的自定义字体将此添加到 HTML <head> 标记中：

<link rel="preload" as="font" href="fonts/some-font.woff2">

【讨论】：

【解决方案2】：

如果它在硬重新加载后一次正常工作，然后因 CORS 错误而失败，则可能是重定向错误。

第一次，浏览器请求您的服务器的 Access-Control-Allow-Origin 标头清除的字体资源 (url)，因此即使该资源重定向到另一个资源，它也会超出您的 CORS 规则。

但是第二次以后，浏览器使用缓存地址直接请求重定向的资源，该地址不在Access-Control-Allow-Origin标头中。

其他浏览器允许这样做，但 Safari 不允许。因此，您必须将第二个资源的来源添加到 Access-Control-Allow-Origin 标头，或者直接从 Access-Control-Allow-Origin 标头中的来源之一提供网络字体。

【讨论】：

【解决方案3】：

这似乎是一个 CORS 错误。您的字体是否从与您的应用程序不同的域加载？在这种情况下，您的应用程序的 URL 需要在返回字体的服务器响应中指定为 Access-Control-Allow-Origin 标头。

请注意，从 CORS 的角度来看，两个不同端口上的 localhost 被视为两个不同的域。

更多信息here.

【讨论】：