ローカルにインストールされたフォントに対して @font-face を使用して不必要なフォントのダウンロードを回避するにはどうすればよいですか?

@font-face src: local - インストールされているフォントの不必要なフォント ダウンロードの回避

@font-face を使用すると、カスタム フォントを定義できます。あなたのCSS。ただし、ユーザーがすでにフォントをローカルにインストールしている場合、不必要なフォントのダウンロードが発生する場合があります。これは、特に @font-face 宣言のインスタンスごとにフォントをダウンロードするブラウザの場合、パフォーマンスの問題になる可能性があります。

この問題を軽減するには、@font-face ルールで「local」キーワードを使用できます。ローカル フォントをダウンロードする前に、ローカル フォントをチェックするようにブラウザに指示します。次のコード スニペットは、「local」キーワードの使用方法を示しています。

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'),
       url('DejaVuSerif-webfont.woff') format('woff'),
       url('DejaVuSerif-webfont.ttf') format('truetype'),
       url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

URL ベースのソースの前に「local」キーワードを配置すると、ブラウザは最初にローカルにインストールされた DejaVu Serif フォントの使用を試みます。 。ローカル フォントが利用できない場合、ブラウザは指定された URL ソースからフォントをダウンロードします。

このアプローチにより、ブラウザは必要な場合にのみフォントをダウンロードするようになり、次のようなユーザーの Web サイトの全体的なパフォーマンスが向上します。フォントはすでにインストールされています。

以上がローカルにインストールされたフォントに対して @font-face を使用して不必要なフォントのダウンロードを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。