複数のfont-weights、1つの@ font-faceクエリ

私は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定義している-queryを1つだけ使用してCSSにインポートできるかどうかを知りたいと思いweightます。クエリを8回コピー/貼り付けしたくない。

したがって、次のようなもの：

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

実際には、@ font-faceの特別なフレーバーがあり、あなたが求めているものだけを許可します。

これは、異なるフォントに関連付けられた異なるスタイルと太さの同じフォントファミリ名を使用する例です。

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

これで、指定することができfont-weight:boldたりfont-style:italic、フォントファミリーまたは上書きを指定しなくても、あなたが好きな要素へfont-weightとfont-style。

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

この機能の完全な概要と標準的な使用法については、この記事をご覧ください。

ペンの例

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