关于CSS：多个字体粗细，一个@ font-face查询


Multiple font-weights, one @font-face query

我必须导入Klavika字体，并且已经收到多种形状和大小的字体：

1
2
3
4
5
6
7
8
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将它们导入CSS，在这里我要在查询中定义weight。我想避免将查询复制/粘贴8次。

类似这样：

1
2
3
4
5
@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
相关讨论

实际上，@ font-face具有特殊的风味，可以满足您的要求。

下面是一个示例，该示例使用相同的字体系列名称，并且具有与不同字体相关的不同样式和权重：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@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。

1
2
3
4
5
6
7
8
9
10
body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

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

有关此功能和标准用法的完整概述，请查看本文。

示例笔

相关讨论

1
2
3
4
5
6
@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;
}
相关讨论