为什么@ 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>&nbsp; <remove fileExtension=".woff" />&nbsp; <!-- In case IIS already has this mime type -->&nbsp; <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />&nbsp; <remove fileExtension=".woff2" />&nbsp; <!-- In case IIS already has this mime type -->&nbsp; <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" /></staticContent>

Answer 2

实际上，@ Ian Robinson的答案效果很好，但Chrome会继续抱怨该消息：“ 资源被解释为字体，但使用MIME类型application / x-woff进行了传输 ”如果知道了，可以从应用/ x-woff至应用程序/ x -font -woff而且您将不再有任何Chrome控制台错误！