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

**`font-variant`** は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。

CSS Level 2 (Revision 1) における `font-variant` の値 (つまり、 `normal` や `small-caps`) は、一括指定の `font` を用いて設定することもできます。

試してみましょう
--------

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
構文
--


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

/\* グローバル値 \*/
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;
```

### 値

`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-numeric` プロパティに関するキーワードを指定します。指定可能な値は、 `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` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式定義
----
```

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    
  
```

例
-

### スモールキャップのフォント変化形の設定

#### 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 |

ブラウザーの互換性
---------

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

関連情報
----

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