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

Question

我在我公司的网站上使用

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

Answer 1

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

如果您遇到同样的情况，可以通过执行以下操作来解决：

解决方案1

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

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

Answer 2

这篇文章的答案非常有帮助，并且节省了大量时间。但是，我发现在使用

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>

Answer 3

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

如果你明白了，你可以从

更改

应用/x-woff

到

应用程序/x-字体-woff

您将不会再遇到任何 Chrome 控制台错误！

（在 Chrome 17 上测试）

Answer 4

IIS7解决方案

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

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

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

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

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

这是我在 IIS 7 中解决该问题的方法

Answer 5

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

Answer 6

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

文件扩展名： .woff

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

Answer 7

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

Answer 8

如果您在 IIS7 下使用 CodeIgniter :

在 web.config 文件中，将 woff 添加到 pattern

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

希望有帮助！

Answer 9

这可能是显而易见的，但它已经让我多次遇到 404 错误...确保字体文件夹权限设置正确。

Answer 10

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

Answer 11

如果您无权访问网络服务器配置，您也可以重命名字体文件，使其以 svg 结尾（但保留格式）。我在 Chrome 和 Firefox 中工作得很好。

Answer 12

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

Answer 13

IIS Mime 类型：.woff font/x-woff（不是 application/x-woff 或 application/x-font-woff）

Answer 14

解决了：

我必须使用Mo'防弹方法