font-variant
============

The **`font-variant`** CSS shorthand property allows you to set all the font variants for a font.

You can also set the `<font-variant-css2>` values of `font-variant` defined in CSS Level 2.1, (that is, `normal` or `small-caps`), by using the `font` shorthand.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
Syntax
------


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

/\* Global values \*/
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;
```

### Values

`normal`

Specifies a normal font face. Each longhand property has an initial value of `normal`.

`none`

Sets the value of the `font-variant-ligatures` as `none` and the values of the other longhand properties as `normal`, 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`, and `no-contextual`.

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

Specifies the keywords and functions related to the `font-variant-ligatures` 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. The `small-caps` value is the only non-`normal` font variant valid within the `font` shorthand 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`, and `slashed-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`, and `ruby`.

`sub`, `super`

Specifies the keywords and functions related to the `font-variant-position` longhand property.

`text`, `emoji`, `unicode`

Specifies the keywords and functions related to the `font-variant-emoji` longhand property.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

font-variant =   
  normal                                              |  
  none                                                |  
  [ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ 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> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]    
  
<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> =   
  <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

#### HTML


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


#### CSS


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


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `text-transform`
* `text-combine-upright`
* `text-orientation`