ホームページ  >  記事  >  ウェブフロントエンド  >  カスタム フォントが Firefox では表示されるのに、Chrome では表示されないのはなぜですか?

カスタム フォントが Firefox では表示されるのに、Chrome では表示されないのはなぜですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-25 13:01:30678ブラウズ

Why is My Custom Font Displaying in Firefox but Not Chrome?

Chrome でカスタム フォントが表示されない: MIME タイプが一致しません

問題:

@font-face を使用したカスタム フォント宣言Firefox では正しく表示されますが、Chrome では失敗します。 Chrome はエラーを報告します:「リソースはフォントとして解釈されましたが、MIME タイプ application/octet-stream で転送されました。」

答え:

ブラウザーによってサポートされるフォントは異なります。ブラウザ間の互換性を確保するには、複数のフォント形式を含む包括的な @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 ファイルを追加し、次の MIME タイプを含めます。

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

以上がカスタム フォントが Firefox では表示されるのに、Chrome では表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。