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

【问题标题】：How to add multiple font files for the same font?如何为同一种字体添加多个字体文件？
【发布时间】：2011-01-27 01:30:28
【问题描述】：

我正在查看MDC page for the @font-face CSS rule，但我没有得到任何信息。我有 bold、italic 和 bold + italic 的单独文件。如何将所有三个文件嵌入到一个 @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），所以它会默认为我可能不想要的字体。如何告诉浏览器我对某种字体的所有不同变体？

【问题讨论】：

作为问题的扩展，如果我们在 TinyMCE 等所见即所得的编辑器中使用这些字体，我们还需要粗斜体字吗？尽管 TinyMCE 有按钮做粗斜体字？我的猜测答案是肯定的——因为他们在寻找这些文件？
How to merge fonts?的可能重复

标签： fonts css font-face

【解决方案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 只允许一种字体样式而不是逗号分隔的列表。）

【讨论】：

顺序很重要，粗体/斜体必须排在最后。
值得注意的是，这在 IE8（及更低版本）中不起作用，即使您使用 EOT。 IE 将下载备用字体，但它不会使用它，而是会假冒粗体/斜体常规字体。此外，Chrome 11 似乎无法呈现既粗体又斜体的字体
这个例子非常适合那些有单独的粗体和斜体 TTF 文件的字体。但是，如果整个字体都在一个 .ttf 文件中，并且您想使用粗体，那该怎么做呢？
This article 很好地解释了为什么会这样。关键摘录：“请注意，所有四种字体的 font-family 属性都是相同的名称。此外，字体样式和字体粗细与字体相匹配。注意：正常粗细必须位于列表顶部！我们还没有发现之后的顺序很重要。”
我在嵌入式浏览器 Android 4.4 上遇到了这个问题。结束将 font-style: italic, oblique; 更改为 font-style: italic; 似乎可以解决所有问题。

【解决方案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;
}

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

【讨论】：

我认为第三种和第四种字体命名错误，它们应该是“斜体”而不是“斜体”。
@NathanMerrill as by OP: I have separate files for bold, italic and bold + italic - 所以有三个不同的文件。该答案纠正了已接受的font-style: italic, oblique; 不再有效，而且该答案对斜体和斜体使用了相同的文件。不过，值得指出的是，文件在两种情况下是共享的。

【解决方案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");
}

【讨论】：

非常有用。 +1
你说的“倒序”是什么意思？
@Nyxynyx 我认为他们的意思是将粗体和斜体版本放在首位，将常规版本放在最后。
那是因为你需要将 font-weight / font-style 在其他情况下设置为“正常”，否则将被替换
@JeffreyNeo 我已将font-weight 和font-style 设置为normal，但它不起作用。倒车是必须的。

【解决方案4】：

现在，2017 年 12 月 17 日。我在spec 中没有找到任何关于 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');
}

【讨论】：

【解决方案5】：

如果您使用的是 Google 字体，我建议您使用以下字体。

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

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

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

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案8】：

要创建 React 应用，请参阅我的 other SO answer here

如果您选择将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");
}

【讨论】：