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

Z时代
2024-01-10
分类：问答

我正在寻找@ font-face CSS规则的MDC页面，但我一无所获。我分别使用，斜体和。如何将所有三个文件嵌入一条@font-face规则？例如，如果我有：

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
span {
    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;
}