Question

我必须导入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 - 查询将它们导入到CSS中，我在查询中定义了weight。我想避免复制/粘贴查询8次。

类似于：

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

Answer 1

实际上有一种特殊的@ 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;
}

有关此功能和标准用途的完整概述，请查看this article.

EXAMPLE PEN

Answer 2

@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;
}

多个字体权重，一个@ font-face查询

2 个答案:

EXAMPLE PEN