@font-face と正しい MIME タイプでブラウザ間の互換性を実現するにはどうすればよいですか?

正しい MIME タイプを使用したクロス ブラウザ @font-face

@font-face ルールを使用してフォントを埋め込む場合、正しい MIME を指定するタイプはブラウザ間で適切にレンダリングするために非常に重要です。この場合、Chrome は MIME タイプが正しくないためエラーを表示します。

これに対処するには、ブラウザ間で互換性のある @font-face 宣言を調べてみましょう:

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

• .eot (IE の場合): IE には .eot ファイル形式が必要です。
• 他のブラウザの場合は .woff または .ttf: 他のブラウザは .woff または .ttf をサポートします。

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

さらに、フォント形式の MIME タイプを指定するには .htaccess ファイルが必要です。

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

これらの変更を実装すると、@font-face ルールによって Firefox と Chrome の両方にフォントが正しく埋め込まれ、ブラウザー間で一貫したレンダリングが保証されます。

以上が@font-face と正しい MIME タイプでブラウザ間の互換性を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。