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

@font-face を使用した複数のフォントのウェイトのクエリ

次のような、ウェイトとスタイルが異なる複数のフォント バリエーションが利用できる状況Klavika フォントについて言及した場合、コピーの繰り返しを避けるために、これらのインポートを単一の @font-face クエリに統合することが可能かどうかを尋ねるのは自然なことです。

その答えは、@font-face の特殊な形式にあります。クエリ自体内で重みを定義できます。

たとえば、さまざまな重みとスタイルを持つ Klavika ファミリをインポートするには、次を利用できます:

@font-face {
  font-family: "Klavika";
  src: url("Klavika-Regular.otf") format("truetype") weight:normal;
  src: url("Klavika-Bold.otf") format("truetype") weight:bold;
  src: url("Klavika-Regular-Italic.otf") format("truetype") weight:normal style:italic;
  src: url("Klavika-Bold-Italic.otf") format("truetype") weight:bold style:italic;
}

このアプローチでは、次の機能が付与されます。 font-family を明示的に宣言したり、以前に設定したフォントの太さとスタイルをオーバーライドしたりすることなく、任意の要素に font-weight または font-style を指定できます。例:

body { font-family:"Klavika", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

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