font-variant プロパティ

最終更新：2026-09-13

font-variant font-variant プロパティ

font-variant CSS プロパティは、small-caps（小型大文字）のように、小文字を小さめの大文字として表示するフォントバリアント効果を適用します。small-caps 値は最も広くサポートされている機能です。

カテゴリ
初期値	normal
継承	はい
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

font-variant: normal | small-caps;

⚙️ 値

値	タイプ	説明
`normal \| small-caps`	キーワード	フォントバリアント（小型大文字）

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
font-variant	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： small-caps は既存の大文字のサイズを維持し、小文字だけを小型大文字に変換するため、英語の見出しに向いています。

❓ よくある質問

Qfont-variant の small-caps 値は中国語のテキストでも機能しますか？

Asmall-caps は小文字を小型大文字として表示します。中国語には大文字小文字の概念がないため漢字には影響しませんが、段落内のラテン文字は変換されます。テキストがすでにすべて大文字の場合、small-caps はサイズを変えません。

Qfont-variant: small-caps と text-transform: uppercase の違いは？

Auppercase はすべての文字を、数字と高さが揃う通常の大文字に変換します。small-caps は元の小文字の相対的な高さを保った、小さめの大文字字形を使うため、英語の見出しや頭字語に向いた上品な見た目になります。

Qモダン CSS で font-variant ショートハンドは何ができますか？

ACSS3 では font-variant がショートハンドに拡張され、合字（font-variant-ligatures）、数字の書式（font-variant-numeric）などを制御します。例えば font-variant-numeric: tabular-nums とすると、表や価格表で桁を揃えるために数字が等幅になります。