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

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

尝试一下
----

语法
--


```css
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` (en-US)。

`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` (en-US)属性相关的关键字，可能的值包括：`jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`。
```

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> (en-US)    
  
<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    
  
```

示例
--

### 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;
}
```


#### 结果

规范
--

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

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

浏览器兼容性
------

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

参见
--

* `text-transform`
* `text-combine-upright` (en-US)
* `text-orientation`