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

Question

我@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;
}

Answer 1

我遇到了同样的症状 - 在Chrome中的woff文件上有404 - 并且正在使用IIS 6在Windows Server上运行应用程序.

如果您处于相同的情况,可以通过执行以下操作来修复它:

解决方案1

"只需通过IIS管理器(网站属性的HTTP标头选项卡)添加以下MIME类型声明:.woff application/x-woff "

更新:根据woff字体的MIME类型和Grsmto,实际的MIME类型是application/x-font-woff(至少对于Chrome).x-woff将修复Chrome 404s,x-font-woff将修复Chrome警告.

截至2017年:Woff字体现已标准化为RFC8081规范的一部分,适用于mime类型font/woff和font/woff2.

感谢Seb Duggan:http://sebduggan.com/posts/serving-web-fonts-from-iis

解决方案2

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

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

Answer 2

这篇文章的答案非常有用,节省了大量时间.但是,我发现在使用时FontAwesome 4.50,我还必须woff2为扩展类型添加其他配置,如下所示,否则woff2类型请求在Chrome的开发者工具中在控制台>错误下发出404错误.

根据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>

Answer 3

实际上@Ian Robinson的答案效果很好,但Chrome会继续抱怨这条消息:" 资源被解释为Font但是使用MIME类型application/x-woff进行传输 "

如果你这样做,你可以改变

应用程序/ x-WOFF

至

application/x -font -woff

并且您将不再有任何Chrome控制台错误!

(在Chrome 17上测试过)

Answer 4

IIS7的解决方案

我也遇到了同样的问题.我认为从服务器级别进行此配置会更好,因为它适用于所有网站.

1. 转到IIS 根节点,然后双击"MIME类型"配置选项

2. 单击右上方"动作"面板中的"添加"链接.

3. 这将打开一个对话框.添加.woff文件扩展名并将"application/x-font-woff"指定为相应的MIME类型.

添加.woff文件扩展名的MIME类型

以下是我在IIS 7中解决问题的方法

Answer 5

除了Ian的回答之外,我还必须允许请求过滤模块中的字体扩展使其工作.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

Answer 6

运行IIS服务器管理器(运行命令:inetmgr)打开Mime类型并添加以下内容

文件扩展名: .woff

MIME类型:application/octet-stream