我在我公司的网站上使用@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;
}
我遇到了同样的症状-在Chrome中的woff文件上出现404 -并且正在IIS 6的Windows服务器上运行一个应用程序。
如果你也有同样的情况,你可以通过以下方法来解决:
解决方案1
简单地通过IIS管理器(网站属性的HTTP Headers选项卡)添加以下MIME类型声明:.woff应用程序/x-woff
更新:根据MIME类型为woff字体和Grsmto实际的MIME类型是应用程序/x-font-woff (Chrome至少)。x-woff将修复Chrome 404, x-font-woff将修复Chrome警告。
截至2017年:Woff字体现在已经作为RFC8081规范的一部分标准化为mime类型font/ Woff和font/woff2。
感谢Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis
解决方案2
你也可以在web配置中添加MIME类型:
<system.webServer>
<staticContent>
<remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff" mimeType="font/woff" />
</staticContent>
</system.webServer>
我遇到了同样的症状-在Chrome中的woff文件上出现404 -并且正在IIS 6的Windows服务器上运行一个应用程序。
如果你也有同样的情况,你可以通过以下方法来解决:
解决方案1
简单地通过IIS管理器(网站属性的HTTP Headers选项卡)添加以下MIME类型声明:.woff应用程序/x-woff
更新:根据MIME类型为woff字体和Grsmto实际的MIME类型是应用程序/x-font-woff (Chrome至少)。x-woff将修复Chrome 404, x-font-woff将修复Chrome警告。
截至2017年:Woff字体现在已经作为RFC8081规范的一部分标准化为mime类型font/ Woff和font/woff2。
感谢Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis
解决方案2
你也可以在web配置中添加MIME类型:
<system.webServer>
<staticContent>
<remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff" mimeType="font/woff" />
</staticContent>
</system.webServer>