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 。