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

我在公司网站上使用@font-face，它运作良好/看起来不错。除Firefox和Chrome之外，.woff文件将引发404错误。 IE不会引发错误。我的字体位于根目录，但是我尝试使用css文件夹中的字体，甚至提供字体的整个URL。如果从我的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;
}

最佳答案

我遇到了相同的症状-Chrome中的woff文件上显示404-并且在具有IIS 6的Windows Server上运行应用程序。

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

解决方案1

“仅通过IIS管理器(网站属性的HTTP header 选项卡)添加以下MIME类型声明:.woff application/x-woff”

更新:根据MIME Types for woff fonts和Grsmto的，实际的MIME类型是application/x-font-woff(至少对于Chrome)。 x-woff将修复Chrome 404，x-font-woff将修复Chrome警告。

截至2017年:Woff字体已作为RFC8081 specification和MIMEt类型font/woff和font/woff2的http://sebduggan.com/posts/serving-web-fonts-from-iis的一部分进行了标准化。

感谢Seb Duggan:ojit_a

解决方案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>

关于css - 为什么@ font-face在woff文件上抛出404错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4015816/