単一の @font-face クエリで複数のフォント ウェイトをインポートできますか?

フォント宣言の最適化: 単一の @font-face クエリで複数のフォント ウェイトをインポートする

フォント ファミリが複数のバリエーションで構成されるシナリオでは、ウェイトとスタイルを個別に @font-face クエリを使用して各バリエーションを個別にインポートするのは面倒になる可能性があります。この記事では、これらのクエリを 1 つの宣言に統合する可能性について検討します。

課題: 複数のフォント ウェイトのインポート

Klavika フォントがさまざまなフォント ウェイトで利用できるシナリオを考えてみましょう。重みとサイズ:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

このタスクは、重みパラメータを定義する単一の @font-face クエリを使用して、これらのバリエーションを CSS にインポートすることです。これにより、クエリを何度もコピーして貼り付ける必要がなくなります。

解決策: 拡張 @font-face 構文の利用

幸いなことに、@font-face は拡張された構文を提供します。単一のフォント ファミリに異なるウェイトとスタイルの値を割り当てることができる構文:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

この例:

• font-family: 'Klavika' はフォント ファミリを定義しますname.
• src: url(..) の後に対応する重みが続き、通常および太字のバリエーションのソース ファイルを指定します。

統合フォント クエリの利点

フォント クエリを統合すると、次のような利点があります。

• コードの重複が減少します。 ウェイトのバリエーションごとに @font-face クエリを繰り返し実行する必要がなくなります。
• 読みやすさの向上: CSS コードを整理して簡潔に保ちます。
• メンテナンスの容易化: フォントのウェイトの変更は 1 か所で行えます。

追加リソース

この機能とその標準的な使用法の包括的な概要については、次の記事を参照してください: [拡張された @font-face 構文](https:/ /developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

サンプル ペン

このテクニックのライブ デモンストレーションを参照してください。次のペンの例: [Multiple Font Weights with a Single @font-face Query](https://codepen.io/anon/pen/abvaqP).

以上が単一の @font-face クエリで複数のフォント ウェイトをインポートできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。