如何使用斜体谷歌字体?

时间:2015-03-08 23:51:18

标签: html css fonts

所以我试图使用斜体版本的Google字体Roboto。

这是Google为我选择的字体提供的代码......

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Roboto:300,100italic' rel='stylesheet' type='text/css'>

我可以让它应用Roboto Slab和Roboto,但我不知道如何使用Roboto Italic。

我能做到......

font-style: italic;

但你可以用任何字体做到这一点,并得到一个虚假的斜体。我想要真正的斜体谷歌字体。

任何人都知道如何正确使用Italic Google字体?

1 个答案:

答案 0 :(得分:10)

使用google字体应用斜体字体样式的正确方法是使用

font-style: italic;

使用粗体字体重

font-weight: bold;

您遇到的问题是您没有为斜体字体添加适当的字体粗细。

如果您希望font-weight: normal; font-style: italic有效,则需要包含400400italic版本:

http://fonts.googleapis.com/css?family=Roboto:400,400italic

font-style: italic将起作用的原因是因为字体声明被设置为指定其适当的样式和重量。如果你查看上面链接的来源,你会发现:

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: ...sources...
}

声明font-weight和font-style允许字体以指定的权重和样式接管。这可以用于反转字体样式,例如您可能希望块引用显示为斜体并强调文本显示正常。

如果没有为样式和重量指定覆盖字体文件,那么浏览器将尽力渲染仿斜体或人造粗体。