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


422

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

Firefox和Chrome有什么版本?Gecko 1.9.2(Firefox 3.6)添加了对WOFF的支持。
Sotiris 2010年

尝试再次将OTF转换为Woff。我有类似的问题,文件解析已损坏。这是一个可以转换为不同类型字体的好网站。onlinefontconverter.com
stacksonstacksonstacks

Answers:


722

我遇到了相同的症状-Chrome中的woff文件上显示404-并且在带有IIS 6的Windows Server上运行应用程序。

如果您处于相同的情况,则可以执行以下操作来修复它:

解决方案1

“只需通过IIS管理器(网站属性的HTTP标头标签)添加以下MIME类型声明: .woff application / x-woff

更新:根据MIME类型获取woff字体Grsmto的MIME类型,实际的MIME类型是application / x-font-woff(至少适用于Chrome)。x-woff将修复Chrome 404,x-font-woff将修复Chrome警告。

截至2017年:Woff字体现已标准化为MIME类型和RFC8081规范的一部分font/wofffont/woff2

IIS 6 MIME类型

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

5
请注意,Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...由于与applicationhost.config文件冲突,您可能会收到错误消息。您可以通过<remove fileExtension=".woff" />在web.config文件中指定新的mimeMap之前添加来纠正此错误,以删除错误的重复项。
皮特2014年

11
MIME类型已标准化为application/font-woff
Fernando Correia 2014年

5
这成功了!如果您遇到相同的问题,但带有.woff2文件,只需添加具有该扩展名的另一个MIME类型(或配置)
mapache 2015年

2
看起来规格已更改(再次)。您的建议application/x-font-woff已过期,从RFC 8081开始,正确的mime类型为font/woffand font/woff2。请在您的链接问题中查看最新答案
Liam

3
该解决方案对我不起作用。什么做的把戏对我来说是:hotcakescommerce.zendesk.com/hc/en-us/articles/...
金拉赫

53

这篇文章的答案非常有帮助,可以节省大量时间。但是,我发现使用时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>

3
并且您提到的标签<staticContent>必须在<system.webServer>标签内
S.Serpooshan 16-10-4

从Windows Server 2012 r2,ASP.Net MVC5进行报告,工作正常。
克伦威尔

44

实际上,@ Ian Robinson的答案效果很好,但Chrome会继续抱怨该消息:“ 资源被解释为字体,但使用MIME类型application / x-woff进行了传输

如果知道了,可以从

应用/ x-woff

应用程序/ x -font -woff

而且您将不再有任何Chrome控制台错误!

(已在Chrome 17上测试)


您在哪里更改?在浏览器中还是在服务器上?
杰克·威尔逊

如上面答案中所述,它必须是服务器。该解决方案是针对Windows Server和IIS 6
adriendenat

1
chrome仍在用x-font-woff为我抱怨
Sonic Soul

再次重申我的意见:似乎规格已更改(再次)。您的建议application/x-font-woff已过期,从RFC 8081开始,正确的mime类型为font/woffand font/woff2。请在您的链接问题中看到最新的答案
Liam

15

IIS7解决方案

我也遇到了同样的问题。我认为从服务器级别进行此配置会更好,因为它适用于所有网站。

  1. 转到IIS 根节点,然后双击“ MIME类型”配置选项

  2. 点击右上角“动作”面板中的“添加”链接。

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

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

转到MIME类型

添加MIME类型

这是我为解决IIS 7中的问题所做的工作


2
请注意,不鼓励仅链接的答案,因此SO答案应该是搜索解决方案的终点(相对于引用的另一个中途停留,随着时间的流逝,它们会变得陈旧)。请考虑在此处添加独立的摘要,并保留该链接作为参考。
kleopatra 2014年

@kleopatra-使用详细信息更新了答案,并删除了链接。
Dhanuka777 '16

“我认为从服务器级别进行此配置会更好,因为它适用于所有网站。” 好吧,这真的取决于。如果您要处理的是可能运行多个内部应用程序的公司服务器,那么您是对的。另一方面,如果您运行一个面向公众的网站,该网站分布在多个服务器上,则web.config方法在“一致性”方面胜出(即它将存在,您不能忘记在一个服务器上进行配置)服务器)。
巴拉兹

10

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

8

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

文件扩展名: .woff

MIME类型:application / octet-stream


1

我尝试了很多有关权限,mime类型等的事情,但是对我来说,最终结果是web.config删除了IIS中的静态文件处理程序,然后将其显式添加回具有静态文件的目录中。一旦我为目录添加了位置节点并添加了处理程序,请求就停止获取404。


1

如果您在IIS7下使用CodeIgniter:

在您的web.config文件中,将woff添加到模式中

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

希望能帮助到你 !


0

这可能很明显,但是它使我不时使用404s了...确保字体文件夹权限设置正确。



0

如果您无权访问Web服务器配置,则也可以只重命名字体文件,使其以svg结尾(但保留格式)。在Chrome和Firefox中对我来说效果很好。


0

添加MIME类型后,如果仍然无法使用,请检查站点的“身份验证”部分中是否启用了“匿名身份验证”,并确保根据给定的屏幕截图选择“应用程序池标识”。

在此处输入图片说明



-1

解决了:

我不得不使用防弹方法


这是否意味着您不再使用WOFF?可能是您的网络服务器未正确配置为提供WOFF文件吗?如看到这一点:stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/...
墨卡托

我用其他机器的编码测试了字体。显示正常,没有404错误。
dcp3450 2010年

它不会让我。编码很长。解释如下:paulirish.com/2010/font-face-gotchas
dcp3450 2010年

1
答案中的链接不再存在。
Munim Munna '18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.