我必须导入 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
现在我想知道是否可以只用一个@font-face
-query 将它们导入 CSS,我在其中定义了 weight
询问。我想避免复制/粘贴查询 8 次。
所以像这样:
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf), weight:normal;
src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
最佳答案
实际上,@font-face 有一种特殊的风格,可以满足您的要求。
这是一个示例,使用相同的字体系列名称,不同的样式和粗细与不同的字体相关联:
@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;
}
您现在可以为您喜欢的任何元素指定 font-weight:bold
或 font-style:italic
,而无需指定字体系列或覆盖 font-weight
和 font-style
。
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
有关此功能和标准用法的完整概述,请查看 this article.
EXAMPLE PEN
关于css - 多个字体粗细,一个@font-face 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28279989/