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

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

Susan Sarandon

リリース： 2024-11-24 05:06:14

オリジナル

621 人が閲覧しました

Can You Define Multiple Font Weights in a Single @font-face Query?

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

Klavika フォントにはさまざまなウェイトと形状があります。これらは、ウェイトを指定する単一の @font-face クエリを使用して CSS にインポートできますか?

解決策:

@font-face の多用途な機能を導入すると、異なるスタイルとウェイトを 1 つのフォントファミリ名に関連付けることができます:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

ログイン後にコピー

を指定できるようになりましたさまざまな要素の font-weight:bold または font-style:italic:

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

ログイン後にコピー

この機能の包括的な詳細については、公式ドキュメントを参照してください。

例:

[ペンの例](https://codepen.io/anon/pen/EjxVqv)

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