html - 如何使用斜体谷歌字体？

Question

所以我尝试使用 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;

但是您可以使用任何字体来做到这一点并获得仿斜体。我想要真正的斜体 Google 字体。

有人知道如何正确使用 Italic Google 字体吗？

Answer 1

将斜体字体样式应用于谷歌字体的正确方法是使用

font-style: italic;

使用粗体字重

font-weight: bold;

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

如果你想要font-weight: normal; font-style: italic 工作，你需要包括 400 和 400italic 版本:

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...
}

声明字体粗细和字体样式允许字体以指定的粗细和样式接管。这可用于在某些情况下反转字体样式，例如您可能希望 block 引用显示为斜体并强调文本显示为正常。

如果没有为样式和粗细指定覆盖字体文件，则浏览器将尽力呈现仿斜体或仿粗体。