如何为同一个字体添加多个字体文件？ [英] How to add multiple font files for the same font?

问题描述

我正在查看 MDC页面的@ font-face CSS规则，但我没有得到一件事。我有粗体，斜体和 bold + italic 的单独文件。我如何将所有三个文件嵌入一个@ font-face规则？例如，如果我有：

I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

浏览器不知道使用什么字体作为粗体DejaVuSansBold.ttf），所以它会默认为我可能不想要的东西。

The browser will not know what font to use for bold (because that file is DejaVuSansBold.ttf), so it will default to something I probably don't want. How can I tell the browser all the different variants I have for a certain font?

推荐答案

解决方案似乎是添加多个 @ font-face 规则，例如：

The solution seems to be to add multiple @font-face rules, for example:

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

顺便说一句，谷歌Chrome浏览器不知道格式（ttf）参数，因此您可能希望跳过该参数。

By the way, it would seem Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

CSS  2 规范。 CSS3 只允许使用一种字体样式而不是逗号 - 分隔的列表。）

(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)

这篇关于如何为同一个字体添加多个字体文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！