谷歌警告：资源被解释为字体，但传输的 MIME 类型为应用程序/八位二进制流。

Question

我的字体-face在Google中有一个警告：

资源被解释为字体，但传输的MIME类型为application/octet-stream：".../Content/Fonts/iconFont.ttf"。

即使我有这个警告，它仍然可以工作，但我更喜欢避免这个警告。

这是我的声明：

@font-face {
  font-family: 'iconFont';
     src: url('../Fonts/iconFont.eot?#iefix') format('embedded-opentype'), 
     url('../Fonts/iconFont.svg#iconFont') format('image/svg+xml'), 
     url('../Fonts/iconFont.woff') format('font/x-woff'), 
     url('../Fonts/iconFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

我已经搜索了其他帖子，但到目前为止没有运气。

请注意，我的服务器是来自Microsoft的IIS。

有什么办法可以避免这个警告吗？

谢谢。

- Bronzato

Answer 1

你需要将以下类型添加到 .htaccess/IIS 文件中：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woff  

已更新 .woff 类型为:

AddType application/x-font-woff .woff

感谢评论区里的@renadeen 指出这一点。

这里可以查看我对类似问题的回答：Font Face not loaded

内容摘自这里：font-face problem in chrome.

- 97ldave

---

我在文件末尾添加了这4行代码，但仍然出现错误。需要多长时间才能使其正常工作？ - Michiel

你尝试过重置/重新启动你的Web服务器吗？IIS？你也查看了我回答中的两个链接吗？ - 97ldave

我没有使用Web服务器 - 您如何在没有Web服务器的情况下解决这个问题？ - d13

根据这个回答，application/x-font-woff已经变成了application/font-woff。 - renadeen

Answer 2

感谢 @97ldave 提供的答案，如果您不想直接将它们添加到IIS设置中的MIME类型中，则可以将这些类型添加到您的IIS webServer配置部分。以下是添加缺少的. woff类型的示例。这解决了我在iMac上使用最新版本Safari（6.0.3）时字体未显示的问题。

<system.webServer>
<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>

感谢我的同事Jon Samwell发现了这个问题。

- The Senator

---

@参议员：谢谢！ - Varun Rathore

我猜测这个针对当前被接受回答的评论提到的应该也适用于这个回答，需要从MIME类型中去掉x-。 - Tom Fenech

谢谢！根据您的回答，我还添加了这两行（Semantic-UI使用它） <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" /> - mike123

Answer 3

Nginx配置文件位置：/etc/nginx/mime.types

font/ttf                         ttf;
font/otf                         otf;
application/x-font-woff          woff;

因为已经存在，所以您不需要application/vnd.ms-fontobject eot;.

然后重新启动Nginx：service nginx restart

完成。

- Steven

---

谢谢你为我省去了另一次谷歌搜索的麻烦 :) - Simon

没问题，伙计 :). 如果你在使用font-awesome（http://fortawesome.github.io/Font-Awesome/）时收到警告，请将以下内容添加到你的Nginx Mime Type文件中：application/x-font-woff .woff - Steven

Answer 4

这里提供另一种方法：http://zduck.com/2013/google-chrome-and-woff-font-mime-type-warnings/

在您的web.config中使用以下设置：

<system.webServer>
<staticContent>
  <mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
</staticContent>
</system.webServer>

- TeYoU

Answer 5

字体正确的MIME类型包括：

application/font-ttf              ttf;
application/font-otf              otf;
application/font-woff             woff;

- Sven

Answer 6

如果您正在运行一个nodeJS服务器，这是一个很好的模块来映射您的mime类型。

https://github.com/broofa/node-mime

var mime = require('mime');

mime.lookup('/path/to/file.txt');         // => 'text/plain'
mime.lookup('file.txt');                  // => 'text/plain'
mime.lookup('.TXT');                      // => 'text/plain'
mime.lookup('htm');                       // => 'text/html'

mime.extension('text/html');                 // => 'html'
mime.extension('application/octet-stream');  // => 'bin'

- Daan

---

我添加了必要的内容。 - Daan

Answer 7

感谢@the-senator和@97ldave提供的答案。

对于我来说，只需将以下内容添加到web.config文件中，错误就完全消失了。

<system.webServer>
<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font" />
    </staticContent>
</system.webServer>

- mesut