web-dev-qa-db-ja.com

Chromeに間違ったMIMEタイプのフォントフェース

これは @font-face私が使用した宣言：

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

これはFirefoxでは完全に機能しますが、Chromeでは機能しません。 「要素を検査」した後、次のメッセージが表示されました。

フォントとして解釈されるが、MIMEタイプapplication/octet-streamで転送されるリソース。

任意の提案をいただければ幸いです。

cssgoogle-chromefont-face
37
moonstruck

いつものように、ブラウザごとにニーズが異なります。 Paul Irish blog -から取られたクロスブラウザの@fontface宣言です。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

.eotはIE用で、残りのブラウザーは.woffまたは.ttfを使用します。ソースフォントから異なるタイプを生成する必要がある場合は、Font Squirrelの font-face generator を使用できます。

また、フォントの場所に.htaccessを追加して、次のタイプを追加する必要があります。

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
76
Eran Galperin

フォントファイルが適切なMIMEタイプで転送されていません。これはWebサーバー構成の問題であり、簡単に修正できます。

Nginxの場合、通常これを/etc/nginxディレクトリにある既存のタイプの構成とマージします。

types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}

Apacheの場合、ドキュメントルートにある.htaccessに次の行を追加します。

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

警告を無視して、トピックに関するこの投稿を検討することもできます フォントの適切なMIMEタイプ

また、次のことにも言及しています。

「注：TrueType、OpenType、およびWOFFフォントには定義されたMIMEタイプがないため、指定されたファイルのMIMEタイプは考慮されません。」

ソース： http://developer.mozilla.org/en/css/@font-face

4
Domokun

NodeJSでサーバーを実行する場合、これはMIMEタイプをマップするための素晴らしいモジュールです

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

0
Daan

.htaccessファイルを編集できる場合は、追加してみてください

addType font/ttf .ttf

それ以外の場合は、代わりにsvg/svgzフォントを使用できます

0
fcalderan