同一家族中的多种字体答案

【问题标题】：Multiple Fonts in Same Family同一家族中的多种字体
【发布时间】：2015-07-01 12:52:09
【问题描述】：

我想知道是否可以将同一字体的多种样式添加到@font-face 标记。我读了几个地方说它是可能的，但每次我都尝试过它只是使用默认字体。我当前使用虚构的 Coolio 字体的示例包括：

@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio.otf)";
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-bold.otf)";
    font-weight: bold;
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-italic.otf)";
    font-style: italic;
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-bolditalic.otf)";
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-condensed.otf)";
    font-stretch: condensed;
}

...等等等等。（我实际上使用的是数字权重，而不仅仅是粗体或正常，但无论哪种方式都不起作用。）

那么有可能还是我阅读的文章不正确？我想我必须用自己的名字来定义每一个，但这违背了只使用一个系列然后依靠各种 CSS 标签来处理样式的意义。

提前致谢！

【问题讨论】：

你不应该做这样的事情。当您使用字体时，您应该能够在 css 选择器上设置粗体等。
为了进一步解释，某些字体具有与基本字体不同的特定变体。例如，如果您使用“粗体”，它将使用字体的实际粗体版本，而不仅仅是加粗基本字体。我很清楚我可以只使用带有基本字体的普通粗细和样式。不过，这不是我想要做的。 :)
你正在做的事情是完全正确的，应该可以工作，所以如果不是，问题就出在其他地方。你所说的“默认字体”是什么意思——你的意思是它回退到通用的sans-serif 还是什么，或者它正在使用../fonts/coolio/otf 并对其应用自己的粗体，或者......？通过对其中一个变体使用不同的字体系列来测试它，比如“CoolioItalic”，并确保它有效或无效；例如，这将验证相对路径是否正确以及字体是否正确加载。
是的，无论我尝试做什么，它都会默认为coolio.otf字体，如上所示。是的，我已经测试以确保文件路径正确（我将第一个标签中的coolio.otf 切换为coolio-extrabold.otf 并且它出现了，但是当我将它切换回来时，它会继续使用coolio.otf我用了“粗体”）。
@brian 这实际上正是你应该做的。同一字体系列的多个声明，具有不同权重和样式的不同源文件。字体没有内置“粗体”和“斜体”，它们是单独的字体文件，（当 MS Word 或 Photoshop 等让你选择“粗体”或“斜体”时，它们实际上是在切换字体文件）跨度>

标签： css fonts font-family

【解决方案1】：

这是正确的语法，并且工作正常，如以下可运行的 sn-p 所示：

@font-face {
  font-family: Coolio;
  src: url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  font-weight: normal;
}

@font-face {
  font-family: Coolio;
  src: url(http://fonts.gstatic.com/s/greatvibes/v4/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
  font-weight: bold;
}

body {
  font-family: Coolio;
}

h1 {
  font-weight: bold;
}

p {
  font-weight: normal;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Font family demonstrator</title>
</head>
<body>
    <h1>This is some text</h1>
    <p>And this is also text</p>
</body>
</html>

出于说明目的，它们是两种完全不同的字体，但我们告诉 CSS 它们都属于“Coolio”系列，字体粗细作为区分因素。

【讨论】：

我不完全确定该怎么做。我看不到这些方面的选择。 :(