概述

font-style CSS 属性允许你选择 font-family 字体下的 italicoblique 样式。 Italic 样式一般是指书写体,相比无样式的字体,通常会占用较少的高度,而 oblique 字形一般只是常规字形的倾斜版本。斜体(italic) 和倾斜体(oblique)都是通过人工倾斜常规字体的字形来模拟的(参见 font-synthesis 对此的控制)。

初始值normal
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

font-style: normal;
font-style: italic;
font-style: oblique;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: unset;

normal
选择 font-family 的常规字体。
italic
选择斜体,如果当前字体没有可用的斜体版本,会选用倾斜体oblique )替代。
oblique
选择倾斜体,如果当前字体没有可用的倾斜体版本,会选用斜体( italic )替代。

正式语法

normal | italic | oblique <angle>?

示例

示例展示了不同的 font-style 值。CSS 看起来像这样:

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

请注意,不是所有的字体都有确切的 obliqueitalic 字形,即便如此,浏览器也会通过使用现有的字形来模拟所缺少的字形。下面是一个使用这两种字形渲染字体的示例:

规范

规范 状态 注释
CSS Fonts Module Level 3
font-style
Candidate Recommendation 没有变化
CSS Level 2 (Revision 1)
font-style
Recommendation 没有变化
CSS Level 1
font-style
Recommendation 初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 1.0 (1.7 or earlier) [1] 4.0 7.0 1.0
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础支持 1.0 1.0 (1) [1] 6.0 6.0 1.0

[1] 在 Firefox 44 之前,Gecko 并不对 obliqueitalic 字形做出区分。在那之后,如果有可用的字形,它将使用正确的字形。

文档标签和贡献者

此页面的贡献者: xhlsrj
最后编辑者: xhlsrj,