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

我有这个代码：

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

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

解决方法

看来你可以,这是从 W3 Spec：

These descriptors define the characteristics of a font face and are
used in the process of matching styles to specific faces. For a font
family defined with several @font-face rules,user agents can either
download all faces in the family or use these descriptors to
selectively download font faces that match actual styles used in
document. The values for these descriptors are the same as those for
the corresponding font properties except that relative keywords are
not allowed,‘bolder’ and ‘lighter’. If these descriptors are omitted,
default values are assumed.

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

原文地址：https://www.jb51.cc/css/215990.html