単一の @font-face 宣言で複数のフォント ウェイトをインポートするにはどうすればよいですか?

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

異なるウェイトを持つ複数のフォント バリアントをインポートするのは、個々のフォント ウェイトに依存すると面倒になる可能性があります。 @font-face ブロック。 CSS は、これらのバリアントを 1 つの宣言に結合するソリューションを提供します。

単一 @font-face クエリの実装

これを実現するための鍵は、 @font-face 宣言。フォントの太さ、フォント スタイル、およびフォント ファミリのプロパティのコロンで区切られたリストを受け入れます。以下に例を示します。

@font-face {
  font-family: "Klavika";
  src: url("Klavika-Bold.otf") weight:bold, url("Klavika-Light.otf") weight:light;
}

この方法でウェイト、スタイル、ファミリーのプロパティを指定すると、複数のフォント バリアントを同時にインポートできます。

使用例

この方法により、個々のフォントで柔軟なスタイル設定が可能になりますweights:

h1 { font-weight:bold; font-family: Klavika; }
p { font-weight:light; font-family: Klavika; }

さらに、標準の @font-face 構文を利用して、src や format などの他のフォント プロパティを指定できます。

続きを読む

この機能を徹底的に調べるには、提供されているオンライン リソースを参照してください。説明と追加の例。

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