font-variant

表示するフォントにスモールキャプスを設定する

Last update: 2008-08-21

スモールキャプスは欧文印刷での柱などに使われる組み方で、全て大文字で書かれるが、単語の最初のアルファベット以外は若干小さな文字サイズを使用する。元々はラテン文字の表記が起源だと習った記憶がある。
HTML では装飾的な意味でヘッドや固有名に使われたりするが、例えば人物名を JACK と記述した場合、音声読み上げブラウザで「ジェー・エィ・シー・ケィ」と読んでしまうことを防ぐためとも書かれている。

ont-variant は全ての要素に対して設定可能だが、これについては次のような条件がある。

  • 日本語の漢字、カタカナ、平仮名には効果は無い
  • 欧文フォントでも指定したフォントがスモールキャップスを表せない場合は無視される

以下はスモールキャップスの表示サンプル。Times New Roman フォントを指定して、上は font-variant: normal、下は font-variant: small-caps を設定している。

Freeway Jam

Freeway Jam

和文でも半角アルファベットや全角アルファベットには効果を期待することができるが、基本的には欧文フォントを指定した要素に使用した方がよいと思う。下は日本語フォントに small-caps を指定したサンプル

Ｆｒｅｅｗａｙ　Ｊａｍ

Freeway Jam

記述

font-variant を指定する記述は下のように行なう。

CSS
#exmp-variant {
 font-family: "Times New Roman", serif;
 font-variant: small-caps;
}

HTML
<p id="exmp-variant" xml:lang="en-US">Freeway Jam</p>

Freeway Jam

条件に書いたように、フォントによってはスモールキャップスを表現できないものもある。そのため CSS には font-family で (プラットフォームで利用可能なフォントを指定すること) 具体的なフォント名を記述することが望ましいと思う。
HTML には通常通り大文字・小文字で記述する。small-caps は単語中の 大文字に継ぐ小文字からスモールキャップスに変換する。2文字目以降に現れた大文字は、そのままレンダリングされるので注意すること。

ドロップキャップの目的で font-variant を設定するのは間違っている。その場合は first-letter: を使わなくてはいけない。

▲ Return to Top