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

我正在查看@ 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），所以它将默认为我可能不想要的内容。 我怎样才能告诉浏览器我对某种字体有不同的变体？

---

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

顺便说一下，谷歌浏览器似乎并不知道format("ttf")参数，所以您可能想跳过这一点。

（这个答案对CSS 2规范是正确的，CSS3只允许使用一种字体而不是逗号分隔的列表。）

---

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

在大多数情况下，斜体可能就足够了，如果你注意确定你将要使用并遵守它的任何情况，斜线规则就不是必须的。

---

如果你使用谷歌字体，我会建议如下。

如果您希望字体从您的本地主机或服务器运行，您需要下载这些文件。

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

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

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

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

将更新后的字体声明与相对路径粘贴到CSS中的woff文件中，即可完成。

链接地址: http://www.djcxy.com/p/33411.html

上一篇: How to add multiple font files for the same font?

下一篇: TeX Font Mapping