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

【问题标题】：Multiple font-weights, one @font-face query多个字体权重，一个@font-face 查询
【发布时间】：2015-04-01 12:45:52
【问题描述】：

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

【问题讨论】：

它不是一种字体...它是多种字体...所以不幸的是，我认为您只能笑着忍受。
是的，抱歉，这是同一家族中的不同字体。
多个 webfont-files === 不同的权重
这篇文章可能会有所帮助：456bereastreet.com/archive/201012/… 实际上这里有一个 SO 答案：stackoverflow.com/questions/10045859/… 使用该文章，这是你想要的替代品，因为你想要的东西是不可能的。

标签： css fonts font-face

【解决方案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

【讨论】：

正如我在上面的评论中建议的那样 ;-)
就我而言，这只使用最低的@font-face。那将是 font-weight: bold;字体样式：斜体；每次我提到 font-family: 'DroidSerif';
你有测试证明这个方法确实有效吗？您如何证明浏览器不只是在没有读取正确的字体文件的情况下伪造字重或样式？
@rojobuffalo 提出了一个非常有效的观点。笔没有做任何事情来验证断言的有效性，这将按预期运行。具体来说，我从 CSS 示例中删除了粗体字体声明并再次运行它。外观一模一样。它是从缓存中提取的吗？浏览器是否只是摆弄常规字体的显示粗细？
这个方法是正确的，在这篇 Mozilla 文章中有概述：hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face。您可以判断笔正在工作，因为它将“粗体”字体定义为斜体字体。如果浏览器伪造它，它会显示为粗体，但如预期的那样显示为斜体。此方法还有一个优点是可以正确设置后备字体的样式，因为font-weight: bold（或其他）与font-family 声明一起使用。

【解决方案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;
}

【讨论】：

请写一些关于为什么这会解决问题的解释。它可以是一个简单的句子。
与上一个解决方案相同。只是更短的符号:)
在哪里可以阅读到这些符号？不要在 MDN 上看到它
它似乎不起作用，我找不到资源，但它似乎有些道理。
字体粗细100、200等呢？