web-dev-qa-db-ja.com

Googleの警告：リソースはフォントとして解釈されますが、MIMEタイプapplication / octet-streamで転送されます

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です。

この警告をどのように回避できますか？

ありがとう。

cssfont-face
68
Bronzato

ここでの別のアプローチ： 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>
14
TeYoU

次のタイプを.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

ここから： chromeのfont-face問題 。

88
97ldave

上記の回答@ 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（私の同僚）に感謝します。

46
The Senator

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

できた.

26
Steven

フォントの正しいMIMEタイプは次のとおりです。

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

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'
3
Daan

@ 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>
1
mesut