CSS font-variant入門｜small-capsとOpenType字形機能の使い方

▶

この記事の要点

font-variant は本来はsmall-caps（小型大文字）を切り替える古典的プロパティ
CSS3 で OpenType フォントの高度な字形機能を扱うショートハンドに拡張された
個別プロパティに font-variant-caps / -numeric / -ligatures / -east-asian / -position / -alternates
主に欧文タイポグラフィ向け。日本語のみのサイトでは効果が分かりにくい
small-caps の本物（フォント側で用意された字形）と合成版では見た目が大きく違う

font-variant とは

font-variant プロパティは、もともとは小型大文字（small-caps）を有効にするためのプロパティでした。CSS3 で大幅に拡張され、OpenType フォントが持つ多彩な字形バリアント機能を CSS から呼び出すためのショートハンドになっています。

古典的な使い方（small-caps）

.headline {
  font-variant: small-caps;
  /* aBcDeF → ABCDEF（ただし高さは小文字のままの「小型大文字」） */
}

.normal { font-variant: normal; }

small-caps は、小文字 abc を大文字の形のまま、小文字サイズの高さで表示する欧文タイポグラフィの慣習です。「In CSS, We Use This」のような上品な見栄えを作れます。

個別プロパティ（CSS3）

font-variant は次の個別プロパティを束ねるショートハンドとして再定義されました。

個別プロパティ	目的	代表的な値
`font-variant-caps`	大文字・小型大文字の制御	`small-caps` / `all-small-caps` / `petite-caps` / `unicase`
`font-variant-numeric`	数字の字形・並びの制御	`tabular-nums` / `oldstyle-nums` / `slashed-zero`
`font-variant-ligatures`	合字（リガチャ）の制御	`common-ligatures` / `discretionary-ligatures`
`font-variant-east-asian`	東アジア用の字形バリアント	`jis78` / `jis90` / `simplified` / `full-width`
`font-variant-position`	上付き・下付き字	`sub` / `super`
`font-variant-alternates`	装飾的な異体字	`stylistic()` / `swash()`

使用例 1: 数字を等幅にする（表組み）

/* 表のセル内の数値を縦に揃える */
.price-table td {
  font-variant-numeric: tabular-nums;
}

欧文フォントの数字は普通プロポーショナル幅（文字幅がバラバラ）なため、表組みで桁が揃いません。tabular-nums を指定すると等幅になり、合計欄や金額表示で美しく揃います。

使用例 2: 旧式数字（oldstyle）

.text {
  font-variant-numeric: oldstyle-nums;
  /* 0123 のうち一部が小文字のように下にぶら下がる古典的な字形 */
}

使用例 3: 合字（ligatures）

.poem {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  /* fi → ﬁ、ffi → ﬃ のように複数字が結合する */
}

.code {
  font-variant-ligatures: none;
  /* コードフォントでは合字を無効化して === を見たまま表示 */
}

使用例 4: 上付き・下付き

.fraction-num { font-variant-position: super; }   /* 1 */
.fraction-den { font-variant-position: sub; }     /* 2 */
/* HTML 側で <sup>1</sup>/<sub>2</sub> と同等の意味 */

日本語環境での注意

font-variant の多くの機能（small-caps、合字、oldstyle 数字）は欧文タイポグラフィ向けです。日本語の文字には基本的に影響しません。日本語サイトで効果を発揮するのは次の用途です。

font-variant-east-asian — JIS90 / JIS04 などの字形切り替え（フォントが対応していれば）
font-variant-numeric — 価格表や成績表の数字組み
英数字混じりの見出しで small-caps

合成 small-caps と本物の違い

フォントに本物の small-caps 字形が含まれていない場合、ブラウザは大文字をそのまま縮小して合成します。これは線が細くなって見え、本物の small-caps（大文字を小さく作り直した字形）とは品質が大きく違います。

本物を使いたい場合は、small-caps 対応フォント（多くの有償欧文書体）を選び、font-variant-caps: small-caps を指定します。Google Fonts では一部のフォントが対応しています。

古い書き方 vs CSS3

書き方	例	備考
CSS2 互換	`font-variant: small-caps;`	すべてのモダンブラウザで動く
CSS3 個別	`font-variant-caps: small-caps;`	同じ意味だが、他の variant 系プロパティと組み合わせられる
CSS3 ショートハンド	`font-variant: small-caps tabular-nums;`	複数機能をまとめて指定

font-feature-settings との関係

font-variant-* はあくまで「意味のある名前」で機能を呼び出す高レベル APIです。OpenType の生機能タグ（liga / smcp / onum / tnum など 4 文字コード）を直接指定したいときは font-feature-settings を使います。

/* 高レベル API */
.a { font-variant-caps: small-caps; }

/* 同等の低レベル指定 */
.b { font-feature-settings: "smcp" on; }

/* 高レベルに無い機能はこちらで */
.c { font-feature-settings: "ss01" on, "case" on; }  /* ストリスティック・セット1 + 大文字最適化 */

原則は font-variant-* を優先します。意図がコード上明確で、ブラウザのアクセシビリティ機能とも連携しやすいためです。font-feature-settings はフォント固有の特殊機能（ストリスティックセットなど）が必要なときの逃げ道です。

FAQ

Q: small-caps を見出しに適用すると検索やコピーで小文字に戻る？
A: 戻ります。font-variant: small-caps は見た目の変換であり、文字データ自体は変えません。コピー時もマークアップ通りに（例: Hello ）取得されます。

Q: 日本語フォントで font-variant-east-asian を指定すると何が変わる？
A: jis78 / jis90 / jis04 といった字形バリアントを切り替えられます。「葛」「叱」など年代によって字形が異なる文字で、フォントが対応していれば該当字形に切り替わります。

Q: ブラウザ対応は？
A: font-variant-numeric / -ligatures / -caps はモダンブラウザでほぼ標準対応しています。-alternates の一部だけ対応が遅れています。

ページ一覧

その他