Webページにローカルにインストールされたフォントファイルを使用する方法は？

Webページにローカルインストールされたフォントを適用します

Webデザインでは、システムに既にインストールされている特定のフォントを使用することもできますが、CSSで直接フォント名を使用しても機能しません。この記事では、Webページにローカルにインストールされたフォントを適切に呼び出す方法を示します。

問題：ローカルフォントはWebページに表示できません

フォント「Jingnan Mai Round」をインストールしたが、CSSコードをインストールしたとします。

 html、body {
  フォントサイズ：18px;
  フォントファミリー：「Jingnan Mai Round Body」、「Microsoft Yahei」、「Helvetica Neue」、Helvetica、Arial、Sans-Serif;
}

「Jingnan Mai Round Body」の代わりに「Microsoft Yahei」をまだ表示しています。フォントファイルのサイズが大きいため、 src属性を介してフォントファイルをロードしたくありません。

解決策： @font-faceルールを使用します

この問題を解決するための鍵は、 @font-faceルールを使用することです。これにより、カスタムフォントを定義してWebページ要素に適用できます。ローカルにインストールされたフォントを使用するため、 srcパスを指定する必要はありません。ブラウザは、システムにインストールされているフォントを自動的に見つけて使用します。

正しいCSSコードは次のとおりです。

 @font-face {
  フォントファミリー： 'Jingnanmaiyuanti'; /*フォント名を定義します。英語名を使用することをお勧めします*/
}

html、body {
  フォントサイズ：18px;
  フォントファミリー： 'Jingnanmaiyuanti'、 "Microsoft yahei"、 "Helvetica neue"、Helvetica、arial、sans-serif;
}

重要なのは：

1. フォント名の定義： @font-faceルールで簡単に認識できるフォント名（英語名など）を定義して、中国名から生じる可能性のある互換性の問題を回避します。
2. フォント名： font-familyプロパティのステップ1で定義されているフォント名を使用します。ブラウザは、この名前に対応するフォントを見つけることを優先します。見つからない場合は、代替フォントが順番に使用されます。

CSSコードを変更した後、まだ表示に失敗した場合は、ブラウザのキャッシュを更新したり、ブラウザを再起動したりしてください。オペレーティングシステムが適切にインストールされ、有効になっていることを確認してください。

以上がWebページにローカルにインストールされたフォントファイルを使用する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。