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

不要忘记，对于大胆的变体，它是font-weight；对于斜体变体，它是font-style

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

在大多数情况下，斜体可能就足够了，如果您谨慎定义使用和坚持使用的斜体，则不需要斜线规则。

如果您使用的是Google字体，建议您采取以下措施。

如果要从本地主机或服务器运行字体，则需要下载文件。

与其在下载链接中下载ttf软件包，不如使用它们提供的实时链接，例如：

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

将URL粘贴到浏览器中，您将获得类似于第一个答案的字体声明。

打开提供的URL，下载并重命名文件。

将更新的字体声明和相对路径粘贴到CSS中woff文件的位置，即可完成操作。

为了使字体变体正常工作，我必须反转CSS中@ font-face的顺序。

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.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仅允许一种字体样式，而不允许使用逗号分隔的列表。）