web-dev-qa-db-ja.com

複数のフォントウェイト、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

クエリでweightを定義している@font-face-クエリを1つだけ使用してCSSにインポートできるかどうかを知りたいと思います。クエリを8回コピー/貼り付けしないようにします。

のようなもの：

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

実際には、@ 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;
}

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

例のペン

193
maioman
@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;
}
2
Mirka Nimsová