Webページにローカルにインストールされている「Jingnan Mai Round Body」を正しく表示するにはどうすればよいですか？

Webサイト統合ローカルフォント：「Jingnan Mai Round」のディスプレイ問題を解決する

システムフォントを正常にインストールした後、Webページで正しく呼び出すにはどうすればよいですか？この記事では、Webサイトでローカルにインストールされている「Jingnan Mai Round」フォントを使用する方法を解決し、 src属性を使用してフォントファイルを直接導入しないようにします（ファイルが大きいため）。

ローカルフォントを使用しようとする一般的なCSSコードスニペットは次のとおりです。

 /* @font-face {
    font-family： 'myfont';
    src：url（ '/style1/font/jingnanmai round body.otf'）format（ 'trueType'）;
} */
html、body {
    フォントサイズ：18px;
    フォントファミリー：「Jingnan Mai Round Body」、「Microsoft Yahei」、「Helvetica Neue」、Helvetica、Arial、Sans-Serif;
}

「Jingnan Mai Round」はフォントリストの上部に配置されていますが、Webページには「Microsoft Yahei」が表示されます。問題は、ブラウザがローカルにインストールされているフォントファイルパスを直接認識できないことです。

解決：

CSSコードを修正し、カスタムフォントを正しく定義および適用する必要があります。

1. フォントの定義（ @font-face）： srcを使用してフォントファイルを直接導入することはありませんが、ブラウザにフォント名を伝えるために@font-faceルールが必要です。重要なのは、フォントファイルパスを指定する必要がなく、ブラウザがシステムフォントライブラリから自動的に検索されることです。

    @font-face {
       フォントファミリー： 'Jingnanmaiyuanti'; /*クリーナーフォント名を使用*/
   }

2. フォントを適用： font-familyプロパティで、ステップ1で定義されているフォント名を使用します。

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

上記の変更により、ブラウザは「Jingnanmaiyuanti」と呼ばれるシステムフォントを使用することを優先します。システムにフォントがインストールされている場合、Webページが正しく表示されます。インストールされていない場合は、代替フォントが順番に使用されます。

追加の提案：

• フォント名： JingNanMaiYuanTiなど、よりシンプルで覚えやすいフォント名を使用して、スペースや特殊文字を含む名前を使用しないようにします。
• ブラウザキャッシュ： CSSを変更した後、ブラウザのキャッシュをクリアするか、ブラウザを再起動して、ブラウザが最新のCSSルールをロードするようにします。

これらの調整を使用すると、フォントファイルの直接導入によって引き起こされる速度の問題を避けながら、Webページに「Jingnan Mai Round」フォントを正常に表示できるはずです。

以上がWebページにローカルにインストールされている「Jingnan Mai Round Body」を正しく表示するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。