@font-face 宣言が Chrome で間違った MIME タイプを表示するのはなぜですか?-CSSチュートリアル-php.cn

@font-face 宣言が Chrome で間違った MIME タイプを表示するのはなぜですか?

Susan Sarandon

リリース： 2024-10-25 22:28:02

オリジナル

859 人が閲覧しました

Why does my @font-face declaration display an incorrect MIME type in Chrome?

「font-face」宣言により Chrome で間違った MIME タイプが表示される

以下の @font-face 宣言を使用すると:

<code class="css">@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}</code>

ログイン後にコピー

it Firefox では問題なく機能しますが、Chrome では失敗します。要素を検査すると、次のメッセージが表示されます:

Resource interpreted as font but transferred with MIME type application/octet-stream.

ログイン後にコピー

このブラウザ間の互換性の問題に対処するには、Paul Irish が提案した汎用性の高い @font-face 宣言を検討してください:

<code class="css">@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}</code>

ログイン後にコピー

この宣言は、以下を提供することでさまざまなブラウザーに対応します:

.eot (Internet Explorer の場合)
.woff または .ttf (他のブラウザーの場合)

これらのフォントを生成するには元のソースからタイプを取得するには、Font Squirrel のフォントフェイスジェネレーターを利用します。

さらに、.htaccess ファイルを追加してフォントタイプを定義します。

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

ログイン後にコピー

以上が@font-face 宣言が Chrome で間違った MIME タイプを表示するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。