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

Question

我在我公司的网站上使用 @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;
}

Answer 1

我遇到了同样的症状 - Chrome 中的 woff 文件出现 404 - 并在带有 IIS 6 的 Windows 服务器上运行应用程序。

如果您遇到同样的情况，您可以通过执行以下操作来修复它:

解决方案1

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

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

截至 2017 年:Woff 字体现已标准化为 RFC8081 specification 的一部分到 MIME 类型 font/woff 和 font/woff2。

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

解决方案2

您还可以在 web config 中添加 MIME 类型:

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