为什么@font-face在woff文件上抛出404错误?

我在我公司的网站上使用@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;
}
224763 次浏览
小开

解决:

我不得不使用莫'Bulletproofer方法

小开
最佳答案

我遇到了同样的症状-在Chrome中的woff文件上出现404 -并且正在IIS 6的Windows服务器上运行一个应用程序。

如果你也有同样的情况，你可以通过以下方法来解决:

解决方案1

通过IIS管理器(网站属性的HTTP Headers标签)简单地添加以下MIME类型声明:.woff应用程序/ x-woff"

根据woff字体的MIME类型和Grsmto，实际的MIME类型是application/x-font-woff(至少Chrome)。x-woff将修复Chrome 404, x-font-woff将修复Chrome警告。

截至2017年: Woff字体现在已被标准化为RFC8081规范的一部分，以mime类型font/woff和font/woff2。

IIS 6 MIME类型

感谢Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

解决方案2

你也可以在网络配置中添加MIME类型:

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

这可能是显而易见的，但它已经让我在404上摔倒了很多次……确保字体文件夹权限设置正确。

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

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

应用程序/ x-woff

来

应用程序/ x字体-woff

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

(在Chrome 17上测试)

小开

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

小开

IIS7解决方案

我也遇到过同样的问题。我认为从服务器级做这个配置会更好，因为它适用于所有的网站。

    进入IIS 根节点，双击“MIME类型” 配置选项

    .使用实例

  1. 点击右上角Actions面板中的“Add”链接。

    2. 这将弹出一个对话框。添加.woff文件扩展名并指定 "application/x-font-woff"作为相应的MIME类型

为.woff文件扩展名添加MIME类型

Go to MIME Types

Add MIME Type

以下是我在iis7中解决这个问题的方法

小开

运行IIS服务器管理器(运行命令:inetmgr) 打开Mime Types并添加以下

文件扩展名: .woff

MIME类型:应用程序/八进制

小开

我尝试了很多关于权限，mime类型等的东西，但对我来说，它最终是网络。config已经删除了IIS中的静态文件处理程序，然后显式地将其添加到包含静态文件的目录中。当我为我的目录添加一个位置节点并重新添加处理程序时，请求就不再得到404。

小开

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

小开

如果你在IIS7下使用CodeIgniter:

在你的网里。将woff添加到模式 . config文件中

<rule name="Rewrite CI Index">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
</conditions>
<action type="Rewrite" url="index.php/{R:0}" />
</rule>

希望能有所帮助!

小开

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

小开

这篇文章的答案非常有用，节省了很多时间。然而，我发现当使用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>
小开

除了Ian的回答之外，我还必须允许请求过滤模块中的字体扩展使其工作。

<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
</staticContent>
<security>
<requestFiltering>
<fileExtensions>
<add fileExtension=".woff" allowed="true" />
<add fileExtension=".ttf" allowed="true" />
<add fileExtension=".woff2" allowed="true" />
</fileExtensions>
</requestFiltering>
</security>
</system.webServer>
小开

如果在添加MIME类型后仍然不能工作，请检查站点的身份验证部分是否启用了“匿名身份验证”，并确保根据给定的屏幕截图选择“应用程序池身份”。

enter image description here


提交答案