The font-variant
CSS shorthand property allows you to set all the font variants for the fonts specified in the @font-face
rule.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
font-variant: small-caps;
font-variant: common-ligatures small-caps;
/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: unset;
Values
normal
- Specifies a normal font face; each of the longhand properties has an initial value of normal. Longhand properties of
font-variant
are:font-variant-caps
,font-variant-numeric
,font-variant-alternates
,font-variant-ligatures
, andfont-variant-east-asian
. none
- Sets the value of the
font-variant-ligatures
tonone
and the values of the other longhand property asnormal
, their initial value. <common-lig-values>
,<discretionary-lig-values>
,<historical-lig-values>
,<contextual-alt-values>
- Specifies the keywords related to the
font-variant-ligatures
longhand property. The possible values are:common-ligatures
,no-common-ligatures
,discretionary-ligatures
,no-discretionary-ligatures
,historical-ligatures
,no-historical-ligatures
,contextual
, andno-contextual
. stylistic()
,historical-forms
,styleset()
,character-variant()
,swash()
,ornaments()
,annotation()
- Specifies the keywords and functions related to the
font-variant-alternates
longhand property. small-caps
,all-small-caps
,petite-caps
,all-petite-caps
,unicase
,titling-caps
- Specifies the keywords and functions related to the
font-variant-caps
longhand property. <numeric-figure-values>
,<numeric-spacing-values>
,<numeric-fraction-values>
,ordinal
,slashed-zero
- Specifies the keywords related to the
font-variant-numeric
longhand property. The possible values are:lining-nums
,oldstyle-nums
,proportional-nums
,tabular-nums
,diagonal-fractions
,stacked-fractions
,ordinal
, andslashed-zero
. <east-asian-variant-values>
,<east-asian-width-values>
,ruby
- Specifies the keywords related to the
font-variant-east-asian
longhand property. The possible values are:jis78
,jis83
,jis90
,jis04
,simplified
,traditional
,full-width
,proportional-width
,ruby
.
Formal definition
Related at-rule | @font-face |
---|---|
Initial value | normal |
Computed value | as specified |
Formal syntax
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 ]
Examples
Setting the small-caps font variant
The following finds a local Open Sans font or imports it, and allows using the font for small-caps.
@font-face {
font-family: "Open Sans";
src: local("Open Sans") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-variant: small-caps;
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of 'font-variant' in that specification. |
Working Draft | |
CSS Fonts Module Level 3 The definition of 'font-variant' in that specification. |
Recommendation |
Browser compatibility
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.