【问题标题】: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.

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2014-07-23
          • 2015-03-21
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-12-19
          相关资源
          最近更新 更多