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 */
}

粗体将被替换为不同的字体特定字词，如斜体或浅色。我想知道是否可以定义一个将使用特定字体的字体，如果设置了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;
}

使用like：

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

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

2 个答案: