font-variantプロパティは、スモールキャピタルの指定します。
このプロパティは、アルファベットなどの大文字、小文字が区別される場合に適用されます。

スモールキャピタルとは、小文字と同じ高さで作られた大文字のことです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

normal｜small-caps｜inherit

初期値

normal

適用される要素

全ての要素

継承

します

パーセント値

N/A

メディア

visual

値の解説

normal

スモールキャピタルではない、通常のフォントになります。

small-caps

スモールキャピタルに分類されたフォントになります。スモールキャピタルが利用できない場合は、通常フォントの大文字を疑似的にスモールキャピタル化して表示すべきとなってますが、これも不可能な場合はすべて大文字のみで表示しても良いとされてます。

font-variantのサンプル

ul li.sample01 {
  font-variant: normal;
}

ul li.sample02 {
  font-variant: small-caps;
}

<ul>
<li class="sample01">Small-caps: The 'font-variant' Property</li>
<li class="sample02">Small-caps: The 'font-variant' Property</li>
</ul>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• Small-caps: The 'font-variant' Property
• Small-caps: The 'font-variant' Property