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

Question

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

- Felix

---

作为对问题的扩展，如果我们在像TinyMCE这样的所见即所得编辑器中使用这些字体，我们是否仍然需要加粗和斜体？尽管TinyMCE有按钮来执行加粗和斜体？我的猜测答案是肯定的-因为它们在内部寻找这些文件。 - Nishant

可能是如何合并字体？的重复问题。 - user2284570

Answer 1

解决方案似乎是添加多个@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只允许一个字体样式，而不是逗号分隔的列表。）

- Felix

---

顺序很重要，加粗/斜体样式必须放在最后。 - The Who

值得注意的是，即使您使用 EOT，这在 IE8（及以下版本）中也无法正常工作。IE 将下载备用字体，但不会使用它，而是会伪粗体/斜体常规字体。另外，Chrome 11 似乎无法渲染既加粗又倾斜的字体。 - JaffaTheCake

这个例子适用于那些有单独的TTF文件来表示粗体和斜体字形的字体，但是如果整个字体都在一个.TTF文件中，并且你想使用粗体，那该怎么办呢？ - user836645

这篇文章非常好地解释了为什么这样做有效。关键摘录：“请注意，font-family属性对于所有四种字体都是相同的名称。此外，font-style和font-weight与字体匹配。注意：正常的字重必须在列表顶部！我们发现其余顺序并不重要。” - JD Smith

我在Android 4.4嵌入式浏览器上使用这段代码时遇到了问题。最终，将“font-style: italic, oblique;”改为只有“font-style: italic;”似乎解决了所有问题。 - Xavi

Answer 2

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

在大多数情况下，如果您注意定义并坚持使用斜体，则斜体可能就足够了，并且不需要使用倾斜规则。

- Josiah

---

我认为第三和第四种字体的名称有误，应该改为“Italic”而不是“Oblique”。 - Nathan Merrill

根据原帖，@NathanMerrill说：“我有加粗、斜体和加粗+斜体三个不同的文件”，因此有三个不同的文件。这个答案纠正了被采纳的答案：font-style: italic, oblique; 不再适用，而且那个答案使用了相同的文件来表示斜体和倾斜体。不过，值得指出的是，在两种情况下使用了同一个文件。 - Silly Freak

Answer 3

为了让字体变化正常工作，我不得不在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");
}

- Cedric Simon

---

非常有用。+1 - Mr. Polywhirl

“Reverse the order” 是什么意思？ - Nyxynyx

@Nyxynyx 我认为他们的意思是先放粗体和斜体版本，最后再放普通版本。 - elimisteve

这是因为在另一种情况下，您需要将font-weight / font-style设置为“normal”，否则会被替换。 - Jeffrey Neo

@JeffreyNeo 我已将 font-weight 和 font-style 设置为 normal，但它不起作用。必须反转。 - formicini

Answer 4

现代时代，2017年12月17日。 我在规范中没有找到关于Font-property-order的必要性的描述。 而且我测试了在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');
}

- xlaoyu.Lee

Answer 5

如果您正在使用Google字体，我建议如下操作。

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

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

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

在浏览器中粘贴URL，您应该会得到类似于第一个答案的font-face声明。

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

将更新后的带有相对路径指向woff文件的font-face声明添加到您的CSS中，完成操作。

- Dieter Gribnitz

Answer 6

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

- Jerry T

---

在挣扎了一个多小时后，这解决了我在Firefox上权重的问题。该死。谢谢！ - Fred Rocha

Answer 7

我将自定义字体添加到我的 styles.less 文件中，就像这样：

@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-LightItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-LightItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Light.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Light.woff') format('woff'),
        url('/fonts/EuclidSquare-Light.otf') format('opentype');
    font-weight: 300;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-RegularItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-RegularItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-RegularItalic.otf') format('opentype');
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Regular.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Regular.woff') format('woff'),
        url('/fonts/EuclidSquare-Regular.otf') format('opentype');
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-MediumItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-MediumItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Medium.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Medium.woff') format('woff'),
        url('/fonts/EuclidSquare-Medium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-SemiboldItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-SemiboldItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Semibold.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Semibold.woff') format('woff'),
        url('/fonts/EuclidSquare-Semibold.otf') format('opentype');
    font-weight: 600;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-BoldItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-BoldItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Bold.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Bold.woff') format('woff'),
        url('/fonts/EuclidSquare-Bold.otf') format('opentype');
    font-weight: bold;
}

body {
    font-family: EuclidSquare, Lato, sans-serif;
}

- Abdul Malik

Answer 8

关于Create React App，请参见我的其他SO答案

1. 如果您选择将css文件直接链接到您的public/index.html：

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

如果你选择通过Js来链接css文件进行捆绑：

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic"; <---
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

- piouson

Answer 9

如果您正在使用Google Font，我建议使用@import url("@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@900&display=swap');")并将font-family: 'Saira Condensed', sans-serif;指定为CSS规则。

- Tux