【font-variant】スモールキャップのフォントを指定する

font-variantプロパティでは、フォントをスモールキャップ(スモール・キャピタル)にすることができます スモールキャップとは、小文字の表示形式が大文字を小さくしたような形状になっている種類のフォントのことです。

スモールキャップを指定すると小文字の部分すべてが、通常よりも小さなサイズの大文字で表示されます。 そのためfont-variantは、日本語テキストのように大文字・小文字の区別がないフォントには反映されず、アルファベットなどの大文字と小文字があるフォントにのみ有効となります。

なおテキストを単に大文字・小文字に変換したい場合は、text-transformプロパティなどを使用します。

書式

  • font-variant : ……… スモールキャップにする

★:normal、small-caps、inherit

normal
スモールキャップではない、通常のフォントを表示します。
small-caps
スモールキャップのフォントを表示します。スモールキャップのフォントが利用できない場合は、通常時の大文字が縮小されて表示されます。

使用した時の例

.sample {font-variant: small-caps;}
<div class="sample">abcdefg ABCDEFG(スモールキャップ)</div>

ブラウザ上の表示例

abcdefg ABCDEFG(スモールキャップ)

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / font
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~