如何使用斜体google字体？

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

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

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 起作用的原因是字体声明设置为指定其适当的样式和粗细。如果您查看上面 link 的来源，您会发现：

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

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

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

How to use italic google fonts?