@font-face を使用すると、Chrome で「リソースはフォントとして解釈されますが、MIME タイプ application/octet-stream で転送されます」というメッセージが表示されるのはなぜですか?

Chrome の @font-face の MIME タイプが正しくありません

Chrome で @font-face 宣言を使用してカスタム フォントを実装しようとした場合、開発者は、「リソースはフォントとして解釈されましたが、MIME タイプ application/octet-stream で転送されました。」というエラー メッセージが表示される場合があります。この問題は、フォント ファイルの MIME タイプと、宣言で指定されている予想されるタイプとの不一致が原因で発生します。

この不一致を解決するには、さまざまなブラウザ要件に対応する包括的な @font-face 宣言を使用できます。 。次のクロスブラウザ宣言により、Chrome と Firefox の両方との互換性が保証されます。

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

.eot ファイルは Internet Explorer 用に指定されていますが、他のブラウザでは .woff または .ttf 形式が使用されます。ソース フォントからこれらのさまざまな形式を生成するには、Font Squirrel のフォントフェイス ジェネレーターの利用を検討してください。

さらに、フォント ファイルに関連する MIME タイプを指定するように .htaccess ファイルを構成する必要があります。

<code class="htaccess">AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff</code>

これらの推奨事項に従うことで、カスタム フォントが Chrome を含むさまざまなブラウザで適切に表示されるようにすることができます。

以上が@font-face を使用すると、Chrome で「リソースはフォントとして解釈されますが、MIME タイプ application/octet-stream で転送されます」というメッセージが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。