为什么@ font-face在woff文件上抛出404错误？ [英] Why is @font-face throwing a 404 error on woff files?

问题描述

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

此外，我使用fontsquirrels工具创建< c $ c> @ 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管理器添加以下MIME类型声明网站属性）： .woff application / x-woff

Update：适用于woff字体的MIME类型和

解决方案2

您也可以在网络配置中添加MIME类型：

 < system.webServer> 
< staticContent> 
< remove fileExtension =。woff/> <！ - 如果IIS已经有这种mime类型 - > 
< mimeMap fileExtension =。woffmimeType =application / x-font-woff/> 
< / staticContent> 
< /system.webServer> 
  

I'm using @font-face on my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff file. IE does not throw the error. I have the fonts located at the root but I've tried with the fonts in the css folder and even giving the entire url for the font. If remove those fonts from my css file I don't get a 404 so I know it's not a syntax error.

Also, I used fontsquirrels tool to create the @font-face fonts and code:

@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;
}

解决方案

I was experiencing this same symptom - 404 on woff files in Chrome - and was running an application on a Windows Server with IIS 6.

If you are in the same situation you can fix it by doing the following:

Solution 1

"Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties): .woff application/x-woff"

Update: according to MIME Types for woff fonts and Grsmto the actual MIME type is application/x-font-woff (for Chrome at least). x-woff will fix Chrome 404s, x-font-woff will fix Chrome warnings.

Thanks to Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Solution 2

You can also add the MIME types in the web config:

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

这篇关于为什么@ font-face在woff文件上抛出404错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！