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

字体 CSS

老丝米亚

2020-03-18

我在寻找@ 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），因此它将默认为我可能不想要的字体。我如何才能告诉浏览器某种字体的所有不同变体？

第2189篇《如何为同一字体添加多个字体文件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

LLSam 2020.03.18

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

Tony猿 2020.03.18

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

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

老丝Davaid 2020.03.18

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

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

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

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

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

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

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

西里小宇宙 2020.03.18

为了使字体变体正常工作，我必须反转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");
}

小小Pro 2020.03.18

解决方案似乎是添加多个@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;
}