【问题标题】:Firefox cannot load @font-face? [duplicate]Firefox 无法加载@font-face? [复制]
【发布时间】:2012-02-04 19:03:53
【问题描述】:

可能重复:
@font-face fonts only work on their own domain

我一直在处理我的博客模板,我正在使用@font-face,但字体似乎无法在 Firefox 中加载。但它在 Chrome、IE、Safari 上是这样的

这是我使用的@font-face

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.eot');
    src: url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.woff') format('woff'),
         url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.ttf') format('truetype'),
         url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

知道为什么以及如何解决吗?

【问题讨论】:

    标签: firefox font-face


    【解决方案1】:

    类似问题:

    1. @font-face doesn't work in Firefox (but exact same code works on another site)
    2. @font-face fonts only work on their own domain

    默认情况下,Firefox 只接受相对链接。如果您想使用绝对链接或包含来自不同域的字体,您需要将这些字体与访问控制标头一起发送 - https://developer.mozilla.org/En/HTTP_Access_Control

    【讨论】:

      【解决方案2】:
      @font-face {
          font-family: 'BebasNeueRegular';
          src: url('./font/BebasNeue-webfont.eot');
          src: url('./font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
               url('./font/BebasNeue-webfont.woff') format('woff'),
               url('./font/BebasNeue-webfont.ttf') format('truetype'),
               url('./font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
          font-weight: normal;
          font-style: normal;
      }
      

      我正在使用该代码并且它有效。不要忘记将 fontkit 上传到您的字体文件夹。

      【讨论】:

        猜你喜欢
        • 2016-02-07
        • 2011-08-29
        • 2017-12-20
        • 2016-12-24
        • 2021-08-10
        • 1970-01-01
        • 2011-04-04
        • 2023-03-20
        • 2018-11-21
        相关资源
        最近更新 更多