我在我公司的网站上使用@font-face,它工作/看起来很棒。除了Firefox和Chrome会在。woff文件上抛出404错误。IE不会抛出错误。我有字体位于根,但我已经尝试了css文件夹中的字体,甚至给出字体的整个url。如果从我的css文件中删除这些字体,我不会得到404,所以我知道这不是语法错误。

另外,我使用fontsquirrel工具创建@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;
}

当前回答

这篇文章的答案非常有用,节省了很多时间。然而,我发现当使用fontaweesome 4.50时,我必须为woff2类型的扩展添加一个额外的配置,也如下所示,否则woff2类型的请求在Chrome的开发人员工具控制台>错误下给出404错误。

根据S.Serp的注释,下面的配置应该放在<system中。网络服务器>标记。

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

其他回答

如果你不能访问你的web服务器配置,你也可以重命名字体文件,使它以svg结尾(但保留格式)。在Chrome和Firefox中工作很好。

IIS Mime类型:.woff font/x-woff(不是application/x-woff,或application/x-font-woff)

还要检查你的URL改写器。如果发现一些“奇怪”的东西,它可能会抛出404。

实际上@Ian Robinson的回答很好,但Chrome会继续抱怨这条消息: 资源解释为字体,但传输与MIME类型应用程序/x-woff

如果你得到了这个,你就可以从

应用程序/ x-woff

to

应用程序/ x-font-woff

和你将不再有任何Chrome控制台错误!

(在Chrome 17上测试)

这篇文章的答案非常有用,节省了很多时间。然而,我发现当使用fontaweesome 4.50时,我必须为woff2类型的扩展添加一个额外的配置,也如下所示,否则woff2类型的请求在Chrome的开发人员工具控制台>错误下给出404错误。

根据S.Serp的注释,下面的配置应该放在<system中。网络服务器>标记。

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