为什么@ font-face在woff文件上抛出404错误?

  • 回答 (2)
  • 关注 (0)
  • 查看 (236)

我正在使用@font-face我公司的网站,它的工作/看起来不错。除了Firefox和Chrome会在.woff文件上引发404错误。IE不会抛出错误。我有位于根目录的字体,但我已经尝试了在CSS文件夹中的字体,甚至给整个网址的字体。如果从我的CSS文件中删除这些字体,我不会得到一个404,所以我知道这不是一个语法错误。

另外,我使用fontsquirrels工具来创建@font-face字体和代码:

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}
砸蛋大叔砸蛋大叔提问于
御姐万岁回答于

这个帖子的答案是非常有用的,节省了大量的时间。但是,我发现在使用时FontAwesome 4.50,我不得不添加一个woff2扩展类型的附加配置,如下所示,其他woff2类型的请求在Chrome的开发工具中给出了一个404错误,在Console> Errors下。

根据S.Serp的评论,下面的配置应该放在<system.webServer>标签内。
<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>
Dust资深服务器虚拟化工程师。回答于

你可以在Web配置中添加MIME类型:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>    
  </system.webServer>

所属标签

可能回答问题的人

  • HKC

    红客学院 · 创始人 (已认证)

    26 粉丝7 提问5 回答
  • Dingda

    Dingda · 站长 (已认证)

    4 粉丝0 提问3 回答
  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问3 回答
  • 螃蟹居

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券