CSS font-variant 属性用于将指定的文本显示为小型大写字体。该属性的作用是将英文的小写字母转换为比正常大写字母尺寸小一号的大写字母。
在CSS2中,font-variant
属性的值可以是:normal或small-caps。normal
表示使用正常的字体。small-caps
表示将字母转换为小型大写字体。如果你指定的字体没有小型大写字体的变体,浏览器可能会将文字显示为该字体大写字母的缩小版本,或者直接使用大写字母作为小型大写字母。
使用font-variant
属性时需还要注意text-transform
属性对文字的影响。如果你将一段文本的font-variant
属性设置为small-caps
,同时使用text-transform
属性将这段文本转换为小写字母,那么所有的文字都会显示为小写。
元素可以从它的父元素中继承font-variant
的值。
注意,font-variant
属性的small-caps
值对本身就是大写字母的文本无效。例如,在HTML代码中,你使用大写字母写了一段文本,然后你想通过font-variant: small-caps
将这段话设置为小型大写字母,得到的最终结果是:这段话显示为正常的大写字母。
在CSS3中,font-variant
属性变为了font-variant-caps
, font-variant-numeric
, font-variant-alternates
, font-variant-ligatures
和 font-variant-east-asian
属性的简写方式。
在CSS3中,font-variant
属性还增加了一些新的值:all-small-caps
, unicase
, titling-caps
和 petite-caps
。目前没有浏览器支持这些新值。
官方语法
font-variant: normal | small-caps | inherit
参数:
- normal:显示为正常字体。
- small-caps:显示为小型大写字体。
- inherit:继承父元素的
font-variant
属性。
font-variant
属性的初始值为normal
。
应用范围
font-variant
属性可以应用在所有的元素上。
示例代码
font-variant: normal; font-variant: small-caps; font-variant: inherit;
在线演示
下面是一段小型大写字体的文本:
font-variant: small-caps
下面的文本本身就是大写字母,在它上面使用small-caps
属性是无效的。
FONT-VARIANT:SMALL-CAPS
浏览器支持
所有的浏览器都支持font-variant
属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。
在IE6和IE7中设置font-variant: small-caps
属性,会使应用在这些文本中的text-transform: uppercase
或text-transform: lowercase
变为text-transform: none
。