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

Question

我正在查看 MDC page for the @font-face CSS rule ，但我没有得到一件事。我有单独的文件用于粗体、斜体 和粗体+斜体。如何将所有三个文件嵌入到一个 @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

解决方案似乎是添加多个@font-face规则，例如:

@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, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

顺便说一下，Google Chrome 浏览器似乎不知道 format("ttf") 参数，因此您可能想跳过它。

(这个答案对于 CSS 2 规范是正确的。CSS3 只允许一种字体样式而不是逗号分隔的列表。)