ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で @font-face を使用してローカル フォントの使用を優先するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-10-26 19:11:29
オリジナル
924 人が閲覧しました

How can I prioritize using local fonts with @font-face in CSS?

@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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート