Question

我有这段代码：

@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;
}

它是相同的“字体”，但由于重量/样式而改变。我可以在一个字体系列中合并这些样式吗？

Answer 1

似乎你可以，这来自W3 Spec：

这些描述符定义了字体的特征用于将样式与特定面匹配的过程。对于字体使用多个@ font-face规则定义的系列，用户代理也可以下载家庭中的所有面孔或使用这些描述符有选择地下载与实际使用的样式相匹配的字体文献。这些描述符的值与除相对关键字之外的相应字体属性不允许，“更大胆”和“更轻”。如果省略这些描述符，假设默认值。

从Google字体中查看此示例：

@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;
}

我可以在CSS中合并一个font-family，通过@ font-face获得更多的字体变体吗？

1 个答案: