CSS 如何为同一个字体添加多个字体文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2436749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add multiple font files for the same font?
提问by Felix
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, italicand bold + italic. How can I embed all three files in one @font-facerule? For example, if I have:
我正在查看@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;
}
The browser will not know which font to be used 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?
浏览器不知道要使用哪种字体作为粗体（因为该文件是 DejaVuSansBold.ttf），所以它会默认为我可能不想要的东西。如何告诉浏览器我对某种字体的所有不同变体？
回答by Felix
The solution seems to be to add multiple @font-facerules, for example:
解决办法似乎是添加多个@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;
}
By the way, it would seem Google Chrome doesn't know about the format("ttf")argument, so you might want to skip that.
顺便说一下，谷歌浏览器似乎不知道这个format("ttf")论点，所以你可能想跳过它。
(This answer was correct for the CSS 2specification. CSS3only allows for one font-style rather than a comma-separated list.)
回答by Josiah
As of CSS3, the spec has changed, allowing for only a single font-style. A comma-separated list (per CSS2) will be treated as if it were normaland override any earlier (default) entry. This will make fonts defined in this way appear italic permanently.
从 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;
}
In most cases, italic will probably be sufficient and oblique rules won't be necessary if you take care to define whichever you will use and stick to it.
在大多数情况下，斜体可能就足够了，如果您注意定义要使用的任何一种并坚持使用斜体规则，则不需要斜体规则。
回答by Cedric Simon
To have font variation working correctly, I had to reverse the order of @font-face in CSS.
为了让字体变体正常工作，我必须颠倒 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");
}
回答by xlaoyu.Lee
nowadays,2017-12-17. I don't find any description about Font-property-order‘s necessity in spec. And I test in chrome always works whatever the order is.
现在，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');
}
回答by Dieter Gribnitz
If you are using Google fonts I would suggest the following.
如果您使用的是 Google 字体，我会建议以下内容。
If you want the fonts to run from your localhost or server you need to download the files.
如果您希望字体从本地主机或服务器运行，您需要下载文件。
Instead of downloading the ttf packages in the download links, use the live link they provide, for example:
不要在下载链接中下载 ttf 包，而是使用它们提供的实时链接，例如：
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic
Paste the URL in your browser and you should get a font-face declaration similar to the first answer.
将 URL 粘贴到浏览器中，您应该会得到类似于第一个答案的字体声明。
Open the URLs provided, download and rename the files.
打开提供的 URL，下载并重命名文件。
Stick the updated font-face declarations with relative paths to the woff files in your CSS, and you are done.
将更新的 font-face 声明与 CSS 中 woff 文件的相对路径粘贴在一起，您就完成了。
回答by Jerry T
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
回答by Ooker
Don't forget that for bold variant, it is font-weight; for italic variant, it is font-style
不要忘记，对于大胆的变体，它是font-weight; 对于斜体变体，它是font-style
