Question

我在Google上收到了关于我的font-face的警告：

资源解释为字体但使用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。

我知道如何避免这种警告？

感谢。

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。

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（我的同事）发现这一点。

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

完成。

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>

Answer 5

字体的正确MIME类型是：

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

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'

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>

Google警告：资源被解释为字体，但使用MIME类型application / octet-stream进行传输

7 个答案: