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

我在看电影，但我什么也看不到。我有单独的文件用于粗体、斜体和粗体+斜体。如何将所有三个文件嵌入到一个

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

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

顺便说一句，Google Chrome似乎不知道

格式（“ttf”）

参数，所以您可能想跳过它

---

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

如果您使用的是谷歌字体，我建议如下

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

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

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

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

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

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

---

将更新后的字体声明与CSS中woff文件的相对路径粘贴在一起，就完成了。

从CSS3开始，规范已经更改，只允许使用单个

字体样式。逗号分隔的列表（根据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;
}

在大多数情况下，斜体可能就足够了，如果您注意定义要使用的内容并坚持使用斜体，那么斜体规则就没有必要了。
为了让字体变体正常工作，我必须颠倒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");
}

现在，2017年12月17日。
我没有发现任何关于字体属性顺序必要性的描述。
我在chrome中测试，无论顺序如何，都能正常工作

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

有关创建React应用程序，请参见我的

如果您选择将
css
文件直接链接到您的
public/index.html
：
@font-face{
字体系列：“FontName”；顺序很重要，粗体/斜体必须排在最后。值得注意的是，这在IE8（及以下）中不起作用，即使您使用EOT。IE将下载替代字体，但它不会使用它，相反，它将伪造常规字体的粗体/斜体。此外，Chrome 11似乎无法呈现粗体和斜体两种字体。该示例非常适用于有单独的TTF文件用于粗体和斜体的字体。但是，如果整个字体都在一个.tt文件中，该怎么办如果您想使用粗体，那么它是如何工作的？这很好地解释了它的工作原理。关键摘录：请注意，所有四种字体的font family属性都是相同的名称。此外，字体样式和字体大小与字体的大小相匹配。注意：正常大小必须位于列表的顶部！我们发现后面的顺序并不重要。"我在嵌入式浏览器Android 4.4上遇到了这个问题。最后将
字体样式：斜体，斜体；
更改为
字体样式：斜体；
似乎解决了所有问题。作为问题的延伸，如果我们在TinyMCE等所见即所得编辑器中使用这些字体，我们还需要粗体斜体吗？尽管TinyMCE有g按钮是否使用粗体斜体？我猜答案是肯定的-因为它们在内部查找这些文件？我认为第三和第四种字体可能重复命名错误，它们应该使用“斜体”而不是“斜体”@NathanMerrill作为OP:
我有三个不同的文件，分别是粗体、斜体和粗体+斜体
-因此有三个不同的文件。这个答案纠正了公认的一个问题：斜体、斜体；
不再有效，但答案对斜体和斜体使用了相同的文件。不过，值得指出的是，这个文件是sh有两种情况。非常有用。+1你说的“颠倒顺序”是什么意思？@Nyxynyx我想他们的意思是先放粗体和斜体版本，然后放常规版本。这是因为你需要将字体大小/字体样式设置为“正常”在另一种情况下，其他人将得到replaced@JeffreyNeo我已将
font-weight
和
font-style
设置为
normal
，但它不起作用。必须反转。