你未必知道的CSS小知识：font-style的oblique属性值

对与css的font-style属性，我估计大家每次见到的都是使用“normal”或 “italic”两个属性值。但事实上，你还可以让它赋值为“oblique”。请看下面的演示：

HTML代码

<h1>Oblique Text</h1>

<h1>Italic Text</h1>

CSS代码

h1 {
  font-weight: normal;
  font-family: Georgia, serif;
  font-style: oblique;
  text-align: center;
  font-size: 50px;
}

h1:nth-child(2) {
  font-style: italic;
}

p {
  font-family: Arial, sans-serif;
  text-align: center;
}

演示

这是什么意思？为什么“oblique”和斜体”italic”的效果是一样的？

CSS规范中是这样描述“oblique”的：

“…让一种字体标识为斜体(oblique)，如果没有这种格式，就使用italic字体。”

这里描述所用的“oblique”和“italic”都是倾斜的意思。“oblique”在维基百科里的解释就是一种排版术语，就是一种倾斜的文字，但不是斜体。

因为“oblique”对于font-style来说是一种合法的属性值，它可和italic进行互换，除非真有一种字体只提供了oblique体而没有提供斜体。

但我似乎从来没有听说过哪种字形提供过oblique字体，也许我错了。研究发现，一种字库好像不能同时提供斜体和oblique两种字体，因为oblique基本上是一种模仿的斜体，而不是真正的斜体。

所以，如果我没有猜错的话，如果一种字库里没有提供斜体字，那当使用CSS的font-style: italic时，浏览器实际上是按font-style: oblique显示的。