在CSS中，我能否通过@font-face合并字体系列以获得更多字体变种？

Question

在CSS中，我能否通过@font-face合并字体系列以获得更多字体变种？

9

我有这段代码：

@font-face {
    font-family: 'Conv_Casper';
    src: url('fonts/Casper.eot');
    src: local('☺'), url('styles/casper/Casper.woff') format('woff'), url('fonts/Casper.ttf') format('truetype'), url('fonts/Casper.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Casper Italic';
    src: url('fonts/Casper Italic.eot');
    src: local('☺'), url('styles/casper/Casper Italic.woff') format('woff'), url('fonts/Casper Italic.ttf') format('truetype'), url('fonts/Casper Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Casper Bold';
    src: url('fonts/Casper Bold.eot');
    src: local('☺'), url('styles/casper/Casper Bold.woff') format('woff'), url('fonts/Casper Bold.ttf') format('truetype'), url('fonts/Casper Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Casper Bold Italic';
    src: url('fonts/Casper Bold Italic.eot');
    src: local('☺'), url('styles/casper/Casper Bold Italic.woff') format('woff'), url('fonts/Casper Bold Italic.ttf') format('truetype'), url('fonts/Casper Bold Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

这是同一种"字体"，只是因为字重/样式不同而变化。我能将这些样式合并为一个字体系列吗？

- markzzz

现在你可以直接调用 font-family: 'Conv_Casper Bold/Italic'; 例如...我从未见过字体合并，所以我认为这是不可能的。但我会等待看看其他人有什么说法。 - chriz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Allan Kimmer Jensen · Accepted Answer

看起来您可以，这是来自W3规范的内容：

这些描述符定义字体面的特征，并在将样式匹配到特定面时使用。对于使用多个@font-face规则定义的字体系列，用户代理可以下载该系列中的所有面或使用这些描述符有选择地下载与文档中实际使用的样式匹配的字体面。这些描述符的值与相应字体属性的值相同，只是不允许使用相对关键字“bolder”和“lighter”。如果省略这些描述符，则假定默认值。

看看谷歌字体的这个示例：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}

一个用法示例：

.will-use-the-first-font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
}

.will-use-the-second-font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
}

.will-use-the-third-font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
}