同一系列中的多种字体

Question

我想知道是否可以将相同字体的多种样式添加到@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 标签来处理样式的意义。

提前致谢！

Answer 1

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

@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"家族，字体粗细作为区分器。

同一系列中的多种字体

Multiple Fonts in Same Family

css

fonts

font-family