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

我正在看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)，因此它将默认为我可能不需要的字体。我怎样才能告诉浏览器某种字体的所有不同变体？

最佳答案

解决方案似乎是添加多个@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仅允许一种字体样式，而不是逗号分隔的列表。)