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

Why is @font-face throwing a 404 error on woff files?

提问by dcp3450

I'm using @font-faceon my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .wofffile. 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.

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

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

另外，我使用 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;
}

回答by Ian Robinson

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

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

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

如果您处于相同的情况，可以通过执行以下操作来修复它：

Solution 1

解决方案1

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

“只需通过 IIS 管理器（网站属性的 HTTP 标头选项卡）添加以下 MIME 类型声明：.woff application/x-woff”

Update:according to MIME Types for woff fontsand Grsmtothe 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.

更新：根据woff 字体和Grsmto的 MIME 类型，实际的 MIME 类型是application/x-font-woff（至少对于 Chrome）。x-woff 将修复 Chrome 404s，x-font-woff 将修复 Chrome 警告。

As of 2017: Woff fonts have now been standardised as part of the RFC8081 specificationto the mime type font/woffand font/woff2.

截至 2017 年：Woff 字体现已作为RFC8081 规范的一部分标准化为mime 类型font/woff和font/woff2.

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

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

Solution 2

解决方案2

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

您还可以在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>

回答by Sunil

The answer to this post was very helpful and a big time saver. However, I found that when using FontAwesome 4.50, I had to add an additional configuration for woff2type of extension also as shown below else requests for woff2type was giving a 404 error in Chrome's Developer Tools under Console> Errors.

这篇文章的答案非常有帮助，可以节省大量时间。但是，我发现在使用 时FontAwesome 4.50，我必须为woff2扩展类型添加额外的配置，如下所示，否则woff2类型请求在 Chrome 的“控制台”>“错误”下的开发人员工具中给出 404 错误。

According to the comment by S.Serp, the below configuration should be put within <system.webServer>tag.

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

回答by adriendenat

Actually the @Ian Robinson answer works well but Chrome will continue complain with that message : "Resource interpreted as Font but transferred with MIME type application/x-woff"

实际上，@Ian Robinson 的回答很有效，但 Chrome 会继续抱怨该消息：“资源被解释为字体，但使用 MIME 类型应用程序/x-woff 传输”

If you get that, you can change from

如果你明白了，你可以从

application/x-woff

应用程序/x-woff

to

到

application/x-font-woff

应用程序/x -font-woff

and you will not have any Chrome console errors anymore !

并且您将不再有任何 Chrome 控制台错误！

(tested on Chrome 17)

（在 Chrome 17 上测试）

回答by Dhanuka777

Solution for IIS7

IIS7解决方案

I also came across the same issue. I think doing this configuration from the server level would be better since it applies for all the websites.

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

1. Go to IIS root nodeand double-click the "MIME Types" configuration option

2. Click "Add" link in the Actions panel on the top right.

3. This will bring up a dialog. Add .woff file extension and specify "application/x-font-woff" as the corresponding MIME type.

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

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

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

Add MIME Type for .woff file name extension

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

Here is what I did to solve the issue in IIS 7

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

回答by martinoss

In addition to Ian's answer, I had to allow the font extensions in the request filtering module to make it work.

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

回答by Thunder

Run IIS Server Manager (run command : inetmgr) Open Mime Types and add following

运行 IIS 服务器管理器（运行命令：inetmgr）打开 Mime Types 并添加以下内容

File name extension:.woff

MIME type: application/octet-stream

文件扩展名：.woff

MIME 类型：应用程序/八位字节流

回答by Matt

I tried a ton of things around permissions, mime types, etc, but for me it ended up being that the web.config had removed the Static file handler in IIS, and then explicitly added it back in for directories that would have static files. As soon as I added a location node for my directory and added the handler back, the requests stopped getting 404s.

我尝试了很多关于权限、mime 类型等的事情，但对我来说，最终是 web.config 删除了 IIS 中的静态文件处理程序，然后显式地将它重新添加到包含静态文件的目录中。一旦我为我的目录添加了一个位置节点并将处理程序添加回来，请求就停止了 404。

回答by IvanJijon

If you are using CodeIgniter under IIS7 :

如果您在 IIS7 下使用 CodeIgniter：

In your web.config file, add woffto the pattern

在您的 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>

Hope it helps !

希望能帮助到你 ！

回答by Dmitriy Romanov

Also check your URL rewriter. It may throw 404 if something "weird" was found.

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

回答by Thinira

If still not works after adding MIME types, please check whether "Anonymous Authentication" is enable in Authentication section in the site and make sure to select "Application pool identity" as per the given screen shot.

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