CSS で @font-face を使用してローカル フォントの使用を優先するにはどうすればよいですか?

@font-face src: local - 自信を持ってローカル フォントを利用する

カスタム フォントを CSS コードに組み込む場合、ブラウザーに必要なシナリオが発生する可能性があります。リモート ソースからフォントをダウンロードするのではなく、ローカルにインストールされたフォントの使用を優先します。この問題は @font-face を使用するときに発生し、ブラウザはダウンロードされたフォントに関して一貫性のない動作をする可能性があります。

この問題に対処するには、CSS コードに実装できる簡単な解決策があります。最初のソースとして「local」を含めることにより、ブラウザはユーザーのローカル システムにフォントが存在する場合、そのフォントを利用しようとします。変更したコードは次のようになります。

<code class="css">@font-face {
    font-family: 'DejaVu Serif';
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.eot');
    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>

この変更により、ブラウザはまずユーザーのローカル システム上に「DejaVu Serif」が存在するかどうかを確認します。フォントが見つかった場合は、ダウンロードせずに使用されます。ローカル フォントが使用できない場合にのみ、ブラウザはリモート フォント ファイルのダウンロードを開始します。

詳細については、提供されているドキュメントを参照してください: https://developer.mozilla.org/en-US/docs/ Web/CSS/@font-face/src

以上がCSS で @font-face を使用してローカル フォントの使用を優先するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。