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

Question

我在我公司的网站上使用@font-face，它的工作/看起来很棒。除了Firefox和Chrome将在.woff文件上抛出404错误。 IE不会抛出错误。我有字体位于根，但我已经尝试使用css文件夹中的字体，甚至给出了字体的整个网址。如果从我的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管理器添加以下MIME类型声明（网站属性的HTTP标头选项卡）： .woff application / x-woff ”

根据{{​​3}}和MIME Types for woff fonts

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

截至2017年：Woff字体现已标准化为Grsmto到mime类型font/woff和font/woff2的一部分。

感谢Seb Duggan：RFC8081 specification

解决方案2

您还可以在网络配置中添加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

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

进行传输

如果你这样做，你可以改变

  

应用程序/ x-WOFF

到

  

应用程序/ x -font -woff

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

（在Chrome 17上测试）

Answer 3

IIS7的解决方案

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

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

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

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

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





以下是我在IIS 7中解决问题的方法

Answer 4

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

  

文件扩展名： .woff

     

MIME类型：application / octet-stream

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

我尝试了很多关于权限，mime类型等的东西，但对我而言，最终是因为web.config已经删除了IIS中的静态文件处理程序，然后显式地将其添加回原来的目录中静态文件。一旦我为我的目录添加了一个位置节点并添加了处理程序，请求就停止了404s。

Answer 7

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

希望它有所帮助！

Answer 8

解决了它：

我不得不使用Mo'Bulletproofer method

Answer 9

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

Answer 10

同时检查您的网址重写器。如果发现某些“怪异”，它可能会抛出404。

Answer 11

如果您无权访问您的网络服务器配置，您也可以重命名字体文件，使其以svg结尾（但保留格式）。适用于Chrome和Firefox。

Answer 12

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

Answer 13

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