为多个不同粗细的字体文件定义一个字体答案

【问题标题】：Define one font face for several font files with different weight为多个不同粗细的字体文件定义一个字体
【发布时间】：2015-07-08 16:31:26
【问题描述】：

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

@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; 中的某处，则说粗体？

【问题讨论】：

标签： css fonts font-face

【解决方案1】：

正确的做法是这样的：

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

【讨论】：

【解决方案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;
}

【讨论】：