使用变体配置字体答案

【问题标题】：Configure font with variants使用变体配置字体
【发布时间】：2017-06-11 21:21:10
【问题描述】：

是否可以将可下载的 TTF 字体配置为与系统字体相同的行为方式，即：

字体系列存储在多个文件中：
- foo.ttf
- foob.ttf
- fooi.ttf
使用通用系列名称分配字体：
```
p{
    font-family: Foo, serif;
}
```

浏览器会自动选择合适的变体：

p.warning{
    font-weight: bold;
}
p.note{
    font-style: italic;
}

我浏览过的文档建议您需要将每个变体配置为完全不同的字体：

@font-face{ 
    font-family: FooRegular; 
    src: url(foo.ttf);
    font-weight: normal;
    font-style: normal;
} 
@font-face{ 
    font-family: FooBold; 
    src: url(foob.ttf);
    font-weight: bold;
    font-style: normal;
} 
@font-face{ 
    font-family: FooItalic; 
    src: url(fooi.ttf);
    font-weight: normal;
    font-style: italic;
}
p{
    font-family: FooRegular, serif;
}
p.warning{
    font-family: FooBold, serif;
    font-weight: bold;
}
p.note{
    font-family: FooItalic, serif;
    font-style: italic;
}

是这样吗，还是我只是在浏览已弃用/不完整的文档？

【问题讨论】：

您是否尝试过为每个字体系列赋予相同的名称？
@duvigeau 就是这样！谢谢！ （我浏览过的一些网站严重错误......） - 随意添加正确的答案，以便为未来的访问者存档信息。
不客气，感谢您添加正确的代码！

标签： css fonts font-face truetype

【解决方案1】：

许多教程忽略的事实是，您可以简单地使用一个姓氏并将其分配给所有规则：

@font-face{ 
    font-family: Foo; /* Just one name */
    src: url(foo.ttf);
    font-weight: normal;
    font-style: normal;
} 
@font-face{ 
    font-family: Foo; /* Just one name */ 
    src: url(foob.ttf);
    font-weight: bold;
    font-style: normal;
} 
@font-face{ 
    font-family: Foo; /* Just one name */
    src: url(fooi.ttf);
    font-weight: normal;
    font-style: italic;
}

...因此您需要的所有 CSS 是：

p{
    font-family: Foo, serif;
              /* ^^^ */
}
p.warning{
    font-weight: bold;
}
p.note{
    font-style: italic;
}

信息归功于@duvigeau

【讨论】：

【解决方案2】：

应该是这样的：

    @font-face{ 
    font-family: Foo; 
    src: url(foo.ttf);
    font-weight: normal;
    font-style: normal;
} 
@font-face{ 
    font-family: Foo; 
    src: url(foob.ttf);
    font-weight: bold;
    font-style: normal;
} 
@font-face{ 
    font-family: Foo; 
    src: url('fooi.ttf');
    font-weight: normal;
    font-style: italic;
}
p{
    font-family: Foo;
}
p.warning{
    font-family: FooBold, serif;
    font-weight: bold;
}
p.note{
    font-family: FooBold, serif;
    font-style: italic;
}

这样您就可以将样式添加到同一个字体系列中。

【讨论】：