如何为相同的字体添加多个字体文件?

我看着MDC页面的@font-face CSS规则，但我不明白一件事。我有单独的文件大胆的， 斜体和粗体+斜体。如何将这三个文件都嵌入到一个@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)，因此它将默认为我可能不想要的字体。我怎么能告诉浏览器所有不同的变体，我有一个特定的字体?

269758 次浏览
小开
最佳答案

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

顺便说一下，它似乎谷歌Chrome不知道format("ttf")参数，所以你可能想跳过它。

(这个答案对于CSS  2规范是正确的。CSS3只允许一种字体样式，而不是逗号分隔的列表。)

小开

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

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

不要在下载链接中下载ttf包，而是使用它们提供的活动链接，例如:

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

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

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

将更新后的带有相对路径的字体外观声明粘贴到CSS中的woff文件中，就完成了。

小开

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

在大多数情况下，斜体可能就足够了，如果你仔细定义并坚持使用斜体规则，就不需要斜体规则。

小开

为了使字体变化正确工作，我必须颠倒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");
}
小开 
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
小开
< p >如今,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应用程序见我的其他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");
}
  1. 如果你选择通过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");
}
小开

我添加了一个自定义字体像这样的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;
}


提交答案