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

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