Css 使用变体配置字体

是否可以将可加载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;
}

---

是这样的，还是我只是在浏览不推荐/不完整的文档？

应该是这样的：

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

---

通过这种方式，您可以将样式添加到同一字体系列。

许多教程忽略的事实是，您可以简单地使用一个系列名称并将其指定给所有规则：

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

---

该信息的功劳归@duvigneau

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