font-variant プロパティは，スモールキャピタル体を使用することを指定するプロパティである。

font-variant: キーワード;

このプロパティは，

• すべての要素に適用される。
• 初期値は，キーワード normal である。
• プロパティの値は，継承される。

　スモールキャピタル体とは，大文字の字体を（ほぼ）そのまま小さくした小文字の字体である。たとえば，アルファベットでは，大文字“A”に対する小文字は“a”であるが，スモールキャピタル体においては，“A”に対する小文字はこの“A”を（ほぼ）そのまま小さくした字形である。

　値として与えるキーワードは，次の中から 1 つである。

normal

スモールキャピタル体を使用しない。

small-caps

スモールキャピタル体を使用する。小文字に対してスモールキャピタル体のフォントフェイスを使用するか，小文字をサイズを縮小した大文字に置換する。単に小文字を大文字に置換するブラウザもある。

　念のために触れておくと，font-variant プロパティは大文字・小文字の概念のあるフォントに対してのみ適用される。

H3 { font-family: "Times New Roman", Times, serif; font-variant: small-caps; }
P { font-family: Verdana, Chicago, sans-serif; }

<H3>Oxidation and Deoxidation</H3>
<P>Oxidation and deoxidation always occur simultaneously. When the one is oxidized, the other is deoxidized.</P>

　ここで，フォントに関する短縮プロパティである font 短縮プロパティを紹介しよう。font 短縮プロパティは，font-style プロパティ，font-weight プロパティ，font-variant プロパティ，font-size プロパティ，line-height プロパティおよび font-family プロパティに対する短縮プロパティであるが，システムで指定されたフォントの設定を参照するという役割も持つ。

font: font-style font-weight font-variant font-size font-family;
font: font-style font-weight font-variant font-size/line-height font-family;
font: キーワード;

　このプロパティがフォントに関するプロパティの一括指定に用いられるとき（上記の 1 番めおよび 2 番めの書式），それぞれ指定されるプロパティの値の与え方に準ずる。ただし，font-style，font-weight および font-variant プロパティに対する値は順不同で，それぞれ省略してもよい（したがって，フォントに関するプロパティの一括指定においては，font-size および font-family プロパティに対する値を必ず上記の順で与えなければならない；また，line-height に対する値を与えるときは font-size プロパティに対する値に続けて，スラッシュ「/」を冠して指定する）。

　まずは，この指定方法による例をご覧いただこう。

H3 { font: bold large Verdana, Chicago, sans-serif; }
P { font: medium/1.5 "MS PGothic", Osaka, "MS Gothic", Gothic, sans-serif; }

<H3>Oxidation and Deoxidation</H3>
<P>　酸化反応と還元反応は，つねに同時に起こっている。一方の物質が酸化されていれば，もう一方の物質は還元されている。</P>

　一方，このプロパティにキーワードを与える場合，そのシステムのフォントの情報を参照する。値は，次の中からひとつを与える。

caption

ボタンなどの，キャプションのついたコントロールのフォント。

icon

アイコンのラベルに使用されるフォント。

menu

ドロップダウンメニューなどに使用されるフォント。

message-box

ダイアログボックスに使用されるフォント。

small-caption

サイズの小さいコントロールのキャプションに使用されるフォント。

status-bar

ウィンドウのステータスバーに使用されるフォント。

　この指定方法では，キーワードによって示されるフォントに，ファミリ，サイズ，ウェイトおよびスタイルなどが同時にセットされる。もし，システムが上記のフォント情報をもたない場合（たとえば，small-caption に相当するフォントがない場合），適当な代替措置がなされるか，デフォルトのフォントが使用される。

P { font: message-box; }

<P>　酸化反応と還元反応は，つねに同時に起こっている。一方の物質が酸化されていれば，もう一方の物質は還元されている。</P>