@font-face を使用してカスタム フォントのブラウザ間互換性を実現するにはどうすればよいですか?

@font-face を使用したカスタム フォントのブラウザ間互換性

@font-face ルールにより、カスタム フォントをフォント内に含めることができます。ウェブページ。ただし、ブラウザごとに要件が異なるため、ブラウザ間の互換性が問題になる場合があります。

次の @font-face 宣言を考慮してください。

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

この宣言は、次の環境ではシームレスに機能します。 Firefox、Chrome ではエラーが発生する可能性があります。 Chrome の「要素の検査」機能により、次のメッセージが表示される場合があります。

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

この問題を解決し、複数のブラウザ間での互換性を確保するには、複数のフォント形式を含む包括的な @font-face 宣言を使用することが重要です。 。 Paul Irish によって提供されている次のブラウザ間互換宣言を使用できます。

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

この宣言では:

• .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

次の手順に従うことで、カスタム フォントがさまざまなブラウザーで正しく表示およびレンダリングされることを保証し、Web ページのユーザー エクスペリエンスと美的魅力を向上させます。

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