你未必知道的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显示的。

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号