単一の @font-face クエリで複数のフォントウェイトをインポートできますか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-15 05:04:02

オリジナル

315 人が閲覧しました

Can I Import Multiple Font Weights with a Single @font-face Query?

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