如何为同一字体添加多个字体文件？

Question

如何为同一字体添加多个字体文件？我正在查看@ font-face CSS规则的MDC页面，但我没有得到一件事。我有单独的文件粗体，斜体和粗体+斜体。如何将所有三个文件嵌入一个@font-face规则中？例如，如果我有：@font-face {     font-family: "DejaVu Sans";     src: url("./fonts/DejaVuSans.ttf") format("ttf");}strong {     font-family: "DejaVu Sans";     font-weight: bold;}浏览器将不知道哪个字体用于粗体（因为该文件是DejaVuSansBold.ttf），因此它将默认为我可能不想要的东西。如何告诉浏览器我对某种字体的所有不同变体？

Answer 1

从CSS3开始，规范发生了变化，只允许一个font-style。以逗号分隔的列表（根据CSS2）将被视为它normal并覆盖任何早期（默认）条目。这将使以这种方式定义的字体永久显示为斜体。

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");}@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;}@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;}@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;}@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;}@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;}

在大多数情况下，斜体可能是足够的，如果你注意定义你将使用哪个并坚持下去，那么就不需要倾斜规则。