css - 使用变体配置字体

Question

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

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

Answer 1

应该是这样的:

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

这样您就可以将样式添加到相同的字体系列。