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

Jim小胖米亚2020-03-19

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

Harry西门2020/03/19 10:23:23

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

老丝Itachi2020/03/19 10:23:23

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

卡卡西Pro小卤蛋2020/03/19 10:23:23

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

希望能帮助到你！

泡芙村村Pro2020/03/19 10:23:23

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

十三小哥Jim2020/03/19 10:23:23

这可能很明显，但是它使我不时使用404s了...确保字体文件夹权限设置正确。

Gil蛋蛋2020/03/19 10:23:23

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

神无LEYMandy2020/03/19 10:23:23

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

小卤蛋JinJin2020/03/19 10:23:23

这篇文章的答案非常有帮助，可以节省大量时间。但是，我发现使用时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>

古一村村2020/03/19 10:23:23

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

文件扩展名： .woff

MIME类型：application / octet-stream

路易GO2020/03/19 10:23:23

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

如果知道了，可以从

应用/ x-woff

至

应用程序/ x -font -woff

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

（已在Chrome 17上测试）

前端LSam2020/03/19 10:23:23

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

米亚凯村村2020/03/19 10:23:23

我遇到了相同的症状-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 404，x-font-woff将修复Chrome警告。~~

截至2017年：Woff字体现已作为MIME模式和的RFC8081规范的一部分进行了标准化。font/wofffont/woff2

IIS 6 MIME类型

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

Tony斯丁2020/03/19 10:23:23

IIS7解决方案

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