424

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

14 回答 14

726

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

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

解决方案 1

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

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

您还可以在web config中添加 MIME 类型：

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>
于 2011-09-10T20:51:15.927 回答
55

这篇文章的答案非常有帮助，并且可以节省大量时间。但是，我发现在使用时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>
于 2015-11-23T16:54:53.570 回答
44

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

如果你明白了，你可以从

应用程序/x-woff

至

应用程序/x -font -woff

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

（在 Chrome 17 上测试）

于 2012-02-28T14:58:58.247 回答
15

IIS7的解决方案

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

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

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

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

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

转到 MIME 类型

添加 MIME 类型

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

于 2014-01-10T10:28:19.300 回答
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>
于 2015-12-02T09:16:10.227 回答
8

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

文件扩展名： .woff

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

于 2014-11-11T08:39:36.387 回答
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>

希望能帮助到你 ！

于 2015-03-03T13:12:50.203 回答
1

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

于 2014-11-11T15:36:44.763 回答
0

这可能很明显，但它让我多次遇到 404 错误...确保字体文件夹权限设置正确。

于 2011-11-19T18:24:25.593 回答
0

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

于 2012-03-29T11:03:26.783 回答
0

If you dont have access to your webserver config, you can also just RENAME the font file so that it ends in svg (but retain the format). Works fine for me in Chrome and Firefox.

于 2015-02-19T11:30:38.387 回答
0

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

在此处输入图像描述

于 2017-05-09T11:05:48.427 回答
-1

解决了它：

我不得不使用Mo'Bulletproofer 方法

于 2010-10-25T15:27:44.177 回答
-1

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

于 2015-06-05T13:33:36.773 回答