多个字体权重,一个@ font-face查询


118

我必须导入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

现在我想知道是否有可能仅用一个将它们导入CSS @font-face -query,即weight在查询中定义的位置。我想避免将查询复制/粘贴8次。

所以像这样:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

4
它不是1种字体...它是多种字体...所以很不幸,我认为您只需要咧着嘴笑就可以了。
Paulie_D 2015年

是的,这是同一家族中的不同字体。
Rvervuur​​t

多个webfont文件===不同的权重
Eric

2
这篇文章可能会有所帮助:456bereastreet.com/archive/201012/…实际上,这里有一个SO答案:stackoverflow.com/questions/10045859/…使用该文章,无法实现您想要的东西。
97ldave 2015年

Answers:


269

实际上,@ 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:boldfont-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;
}

有关此功能和标准用法的完整概述,请参阅本文。


示例笔


1
就像我在上面的评论中建议的那样;-)
97ldave 2015年

4
就我而言,这仅使用最低的@ font-face。那将是字体粗细:粗体;字体样式:斜体;每当我提到字体家族时:“ DroidSerif”;
西蒙·阿诺德

1
您是否有测试证明此方法确实有效?您如何证明浏览器不仅在不读取正确字体文件的情况下伪造重量或样式?
rojobuffalo

1
@rojobuffalo 这是一个示例笔,工作正常。
maioman '16

2
@rojobuffalo提出了非常正确的观点。笔不执行任何操作来验证断言的有效性,该断言将达到预期效果。具体来说,我从CSS示例中删除了粗体字体声明,然后再次运行它。外观是相同的。它是从缓存中拉出的吗?浏览器是否只是在摆弄常规字体的显示粗细?

10
@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;
}

17
请写一些关于为什么这可以解决问题的解释。句子可能很简单。
ggderas

3
与上一个解决方案相同。
简而言之

2
我在哪里可以读到这些符号?在MDN上看不到它
avalanche1

它似乎没有用,我也找不到资源,但是似乎有些道理。
dakab
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.