字体样式有四个属性,分别是:font-style、font-variant、font-weight 和 font-stretch,本节将一一介绍。
font-style
- normal 正常的字体。
- oblique 倾斜的字体。
- italic 意大利体。
oblique 与 italic 的区别
oblique 只是把 normal 的字体倾斜一下,而 italic 则挺考究的,它除了斜一下,它可能还要改变一下文字的勾啊、弯啊什么的。
如果我们设置 font-style 为 italic,而字库中又没有 italic,此时浏览器会用 oblique 来显示。
总体来说,二者区别不大。
font-variant
- normal 正常的字体。
- small-caps 小型的大写字母字体。
关于 font-variant:small-caps; 与 text-transform:uppercase;
二者均是将字母大写,但 font-variant:small-caps; 的尺寸更小。如下:

font-weight
- normal 正常的字体。相当于 400。声明此值将取消之前任何设置。
- bold 粗体。相当于 700。也相当于 b 对象的作用。
- bolder 比 normal 略粗。
- lighter 比 normal 略细。
- 100 字体至少像 200 那样细。
- 200 字体至少像 100 那样粗,像 300 那样细。
- 300 字体至少像 200 那样粗,像 400 那样细。
- 400 相当于 normal。
- 500 字体至少像 400 那样粗,像 600 那样细。
- 600 字体至少像 500 那样粗,像 700 那样细。
- 700 相当于 bold。
- 800 字体至少像 700 那样粗,像 900 那样细。
- 900 字体至少像 800 那样粗。
font-stretch
改变字体的宽度,目前浏览器不支持,所以仅需了解一下。
- ultra-condensed 极窄
- extra-condensed 很窄
- condensed 窄
- semi-condensed 有点窄
- normal 正常
- semi-expanded 有点宽
- expanded 宽
- extra-expanded 很宽
- ultra-expanded 极宽
除了上述属性值外,还有两个:
- narrower 比继承的 font-stretch 值还窄一个单位,除非继承的值是 ultra-condensed。
- wider 比继承的 font-stretch 值还宽一个单位,除非继承的值是 ultra-expanded。