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

Z时代
2024-01-10
分类：问答

我必须导入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;
}

回答：

实际上，@ 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-

family或覆盖font-weightand font-style。

body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
span em {
  font-weight:bold;
  font-style:italic;
}

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