font-variant - CSS（层叠样式表） 编辑

font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian等属性的简写。你也可以使用简写 font 设定font-variant在CSS Level 2 (Revision 1)中的值（即normal 或 small-caps）。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

font-variant: small-caps;
font-variant: common-ligatures small-caps;

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

值

normal

规定一个常规（normal）字型；每个非简写的属性的初始值都是normal。属于 font-variant 的非简写属性有：font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures 和 font-variant-east-asian。

none

将font-variant-ligatures设定为 none ，将其他非简写属性的值设定为初始值normal。

<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>

规定与font-variant-ligatures属性相关的关键字，可能的值包括： common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual 和 no-contextual。

stylistic(),  historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()

规定与font-variant-alternates属性相关的关键字和函数。

small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

规定与font-variant-caps 属性相关的关键字和函数。

<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero

规定与font-variant-alternates属性相关的关键字，可能的值包括：lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal 和 slashed-zero。

<east-asian-variant-values>, <east-asian-width-values>, ruby

规定与font-variant-east-asian属性相关的关键字，可能的值包括：jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby。

正式语法

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]
where 
<common-lig-values> = [ common-ligatures | no-common-ligatures ]
<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
<contextual-alt-values> = [ contextual | no-contextual ]
<feature-value-name> = <custom-ident>
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]

示例

HTML

<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}

结果

规范

初始值	normal
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	yes
计算值	as specified
Animation type	discrete

Specification	Status	Comment
CSS Fonts Module Level 3 font-variant	Candidate Recommendation	Made it a shorthand of the new font-variant-* properties.
CSS Level 2 (Revision 1) font-variant	Recommendation	No change
CSS Level 1 font-variant	Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• text-transform
• text-combine-upright
• text-orientation