为多个不同字重的字体文件定义一个字体

Question

我在使用自定义字体时遇到了这个问题。许多提供了几个文件来支持不同的字体粗细和斜体，所以你将定义一个字体：

@font-face {
  font-family: 'WebFont Bold';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

其中粗体将替换为不同的字体特定字样，如斜体或浅色。我想知道是否可以定义一种使用特定字体的字体，如果设置了 css font-weight: bold; 中的某处，请说粗体？

Answer 1

正确的做法是这样的：

@font-face {
  font-family: 'WebFont';
  src: url('myfont_regular.woff')....
}
@font-face {
  font-family: 'WebFont';
  font-weight: bold;
  src: url('myfont_bold.woff')....
}

Answer 2

您可以为不同的字体设置相同的名称，例如：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff') format('woff'),
       url('myfont-bold.ttf') format('truetype');
  font-weight: bold;
}

并像这样使用：

p {
    font-family: 'MyFont';
}
strong {
    font-family: 'MyFont';
    font-weight: bold;
}

为多个不同字重的字体文件定义一个字体

Define one font face for several font files with different weight

css

fonts

font-face