CSS 多个字体权重，一个@font-face 查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28279989/
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
Multiple font-weights, one @font-face query
提问by Rvervuurt
I have to import the Klavika font and I've received it in multiple shapes and sizes:
我必须导入 Klavika 字体，并且收到了多种形状和大小的字体：
Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf
Now I would like to know if it's possible to import those into CSS with just one @font-face-query, where I'm defining the weightin the query. I want to avoid copy/pasting the query 8 times.
现在我想知道是否可以只用一个@font-face-query将它们导入 CSS ，我weight在查询中定义了。我想避免复制/粘贴查询 8 次。
So something like:
所以像：
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf), weight:normal;
src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
回答by maioman
Actually there is a special flavor of @font-face that will permit just what you're asking.
实际上，@font-face 有一种特殊的风格，可以满足您的要求。
Here's an example using the same font-family name with different styles and weights associated with different fonts:
这是一个示例，使用相同的字体系列名称，不同的样式和粗细与不同的字体相关联：
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
You can now specify font-weight:boldor font-style:italicto any element you like without having to specify the font-family or overriding font-weightand font-style.
您现在可以指定font-weight:bold或font-style:italic任何您喜欢的元素，而无需指定 font-family 或覆盖font-weightand font-style。
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
For a full overview of this feature and the standard use take a look at this article.
有关此功能和标准用法的完整概述，请查看本文。
EXAMPLE PEN
示例笔
回答by Mirka Nimsová
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}
