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

我在公司的网站上使用了

@font-face

，效果很好。除了Firefox和Chrome之外，将在

.woff

文件上抛出404错误。IE没有抛出错误。我有位于根目录的字体，但我尝试了css文件夹中的字体，甚至给出了字体的整个url。如果从css文件中删除这些字体，我不会得到404，所以我知道这不是语法错误

此外，我还使用FontSquirres工具创建了

@font-face

字体和代码：

@font-face{
字体系列：“LaurencLownRegular”；
src:url（'/laurencb webfont.eot'）；
src:local（'☺'), 
url（'/laurencb webfont.woff'）格式（'woff'），
url（'/laurencb webfont.ttf'）格式（'truetype'），
url（'/laurencb webfont.svg#webfontaafhows'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“FontInsasRegular”；
src:url（'/fontin_sans_r_45b-webfont.eot'）；
src:local（'☺'), 
url（'/fontin_sans_r_45b-webfont.woff'）格式（'woff'），
url（'/fontin_sans_r_45b-webfont.ttf'）格式（'truetype'），
url（'/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}

解决了这个问题：

---

我不得不使用

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

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

解决方案1 “只需通过IIS管理器（网站属性的HTTP标题选项卡）添加以下MIME类型声明即可：.woff应用程序/x-woff”

更新：根据，实际MIME类型为application/x-font-woff（至少适用于Chrome）。x-woff将修复Chrome 404，x-font-woff将修复Chrome警告

自2017年起：Woff字体现已作为mime类型

font/Woff

和

font/woff2

的一部分标准化

感谢塞布·达根：

解决方案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>

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

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

如果你得到了，你可以从

应用程序/x-woff

到

应用程序/x-font-woff

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

---

（在Chrome 17上测试）

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

IIS7的解决方案

---

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

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

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

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

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

以下是我为解决IIS 7中的问题所做的操作运行IIS服务器管理器（Run命令：inetmgr） 打开Mime类型并添加以下内容

文件扩展名：.woff

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

---

我在权限、mime类型等方面做了很多尝试，但对我来说，web.config删除了IIS中的静态文件处理程序，然后显式地将其重新添加到包含静态文件的目录中。我为目录添加了位置节点并重新添加了处理程序后，请求就停止了404s。

如果您没有访问Web服务器配置的权限，您也可以重命名字体文件，使其以svg结尾（但保留格式）。在Chrome和Firefox中对我很好。

如果您在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>

---

希望有帮助！

IIS Mime类型：.woff-font/x-woff（不是应用程序/x-woff或应用程序/x-font-woff）这篇文章的答案非常有用，节省了大量时间。然而，我发现在使用

4.50

时，我不得不为

woff2

类型的扩展添加一个额外的配置，如下所示，否则对

woff2

类型的请求会在Chrome的开发工具控制台下显示404错误美国

根据S.Serp的评论，下面的配置应该放在

标签中

<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类型后仍不起作用，请检查站点的“身份验证”部分是否启用了“匿名身份验证”，并确保根据给定的屏幕截图选择“应用程序池标识”

---

firefox和chrome的版本是什么？Gecko 1.9.2（firefox 3.6）添加对WOFF的支持。再次尝试将OTF转换为WOFF。我遇到类似问题，文件解析已损坏。这是一个转换为不同类型字体的好网站。这是否意味着您不再使用WOFF？是否可能是您的Web服务器未正确配置为提供WOFF文件？例如，请参见：我使用t测试了字体他用其他机器编码。显示良好，没有404错误。它不允许我。编码方式是t