为什么@ 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

这篇文章的答案非常有帮助，可以节省大量时间。但是，我发现使用时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 2

实际上，@ Ian Robinson的答案效果很好，但Chrome会继续抱怨该消息：“ 资源被解释为字体，但使用MIME类型application / x-woff进行了传输 ”

如果知道了，可以从

应用/ x-woff

至

应用程序/ x -font -woff

而且您将不再有任何Chrome控制台错误！