この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:10:02

タイトル: font-variantプロパティ
SEOタイトル: CSS font-variant 完全ガイド（small-caps / OpenType 機能 / font-variant-* ファミリ / 数字組み）

この記事の要点
  • 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 → fi、ffi → ffi のように複数字が結合する */
}

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

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

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

日本語環境での注意

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 の一部だけ対応が遅れています。

関連