さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題

Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照することができます。これにより、フォントがユーザーのコンピューターにローカルにインストールされておらず、設計されたスタイルに従って表示できないという問題が解決されます。

知らせ：

@font-faceをサポートするブラウザは、Internet Explorer 9、Firefox Opera、Chrome、Safari です。また、IE9 は .eot フォントのみをサポートしますが、Firefox、Chrome、Safari、Opera は .ttf および .otf フォントをサポートします。

一般的な使用法:

@フォントフェイス {
 font-family: 'myFirstFont'; //フォント名を定義します。後でフォントを使用する場合は、この名前を使用します。src: url('YourWebFontName.ttf'),
  url('YourWebFontName.eot'); /* IE9 */
} 

h1 {フォントファミリー:'myFirstFont';}

互換性の記述

@フォントフェイス {
 フォントファミリ: 'myFirstFont';
 src: url('YourWebFontName.eot'); /* IE9 互換モード */
 src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* 最新のブラウザ */
         url('YourWebFontName.ttf') format('truetype'), /* Safari、Android、iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* レガシー iOS */
}

ブラウザによってサポートされるフォント形式は異なります。現在主流のブラウザを基準にすると、 @font-faceを使用するには少なくとも .woff、.eot、.SVG フォント形式が必要であり、さらに多くのブラウザ バージョンをサポートするには .svg などのフォントも必要です。

.TTF、.OTF - Firefox 3.5、Safari、Opera 用。
.EOT - Internet Explorer 4.0 以降の場合;
.SVG - Chrome、iPhone用

使用するフォントの 3 つのファイル形式を取得し、主要なブラウザでフォントが適切に表示されることを確認します。

拡張子: フォントパス

local はローカル アドレスを意味し、url は URL を意味します (URL パス内のフォント、Web ページが読み込まれると、フォントはサーバーから自動的にダウンロードされるため、フォント ファイルが大きすぎると、Web ページの読み込みが遅くなります)

コードとして

@フォントフェイス {
  フォントファミリ: 'myFirstFont';
  src: url('YourWebFontName.eot'), local('YourFontName.eot');
}

知らせ：

src に複数のフォントが定義されている場合、それらは順番に候補関係になります。定義されたフォントまたは順序が変更された場合、変更された効果を確認するにはブラウザを再度開く必要があります。更新は無効です。

@font-faceのfont-familyの役割はフォント変数を宣言することであり、これは通常のセレクタのfont-familyとは異なります。

要約する

さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入した記事はこれで終わりです。CSSフォント@font-faceに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。