[解決済み] 複数の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

さて、これらをCSSに取り込むのに、たった一つの @font-face -クエリを定義しています。 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-family名で、異なるフォントに関連する異なるスタイルとウェイトを使用する例を示します。

@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-family を指定したりオーバーライドすることなく、好きな要素に追加できます。 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;
}

この機能の概要と標準的な使用方法については、以下を参照してください。 この記事

例ペン