css - 多个字体粗细，一个@font-face 查询

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-query 将它们导入 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