Google警告:资源被解释为字体,但以MIME类型application / octet-stream传输


68

我在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。

知道如何避免此警告吗?

谢谢。

Answers:



88

您需要将以下类型添加到.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在下面的评论中指出了这一点。)

在这里查看我对类似问题的回答:未加载字体

从此处获取:chrome中的字体问题


我在文件末尾添加了这4行,但是仍然出现错误。使它工作需要多长时间?
Michiel 2013年

您是否尝试过重置/重新启动Web服务器?IIS?您是否也检查了我答案中的2个链接?
97ldave 2013年

我没有使用网络服务器-如果没有服务器,该如何解决?
d13

11
根据这个答案 application/x-font-woff就成了application/font-woff
renadeen

46

感谢上面的回答@ 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(我的同事)找到了这个。


@参议员:谢谢!
Varun Rathore 2014年

5
我猜想关于当前接受的关于x-从mime类型中删除的答案的评论也适用于该答案。
Tom Fenech 2014年

2
谢谢!我还根据您的回答添加了这两行(语义UI使用它)<删除fileExtension =“。woff 2 ” /> <mimeMap fileExtension =“。woff 2 ” mimeType =“ application / x-font-woff” />
mike123

26

对于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

做完了


1
感谢您为我保存了另一个Google搜索:)
Simon

1
搭档没问题:)。| 如果您收到font-awesome(fortawesome.github.io/Font-Awesome)的警告,只需将其放在您的Nginx Mime类型文件中:application / x-font-woff .woff
Steven

10

字体的正确MIME类型是:

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

3

如果您使用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

1

感谢@ 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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.