font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。
font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。
font-variant-east-asian
font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。
font-variant-east-asian: proportional-width
font-variant-east-asianプロパティの値にproportional-widthを指定すると、OpenTypeフォント内のプロポーショナルな字形が適用され、文字が可変幅で表示されます。この設定は、font-feature-settingsプロパティの「"pwid" 1」と同じ効果があります。font-variantを使う理由については後述します。
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>① font-variant-east-asian: proportional-width;</h2>
<p class="proportional-width">おはよう。３月２４日、ヨロシクお願いします！</p>
</div>
<div>
<h2>② 指定なし</h2>
<p>おはよう。３月２４日、ヨロシクお願いします！</p>
</div>
▼ CSS（一部抜粋）
.proportional-width {
font-variant-east-asian: proportional-width;
}
「プロポーショナルな字形」は、字詰めに関する設定である「プロポーショナルメトリクス」とは異なります。プロポーショナルメトリクスを設定したい場合は、font-feature-settingsプロパティで"palt"を指定する必要があります。font-feature-settingsプロパティについては、以下の記事で詳しく紹介しています。
font-variant-east-asian: traditional
font-variant-east-asianプロパティの値にtraditionalを指定すると、一部の漢字が旧字や中国語の繁体字で表示されます。
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>① font-variant-east-asian: traditional;</h2>
<p class="traditional">台湾 仙台 芸大</p>
</div>
<div>
<h2>② 指定なし</h2>
<p>台湾 仙台 芸大</p>
</div>
▼ CSS（一部抜粋）
.traditional {
font-variant-east-asian: traditional;
}
font-variant-emoji
通常、絵文字はブラウザがOS指定のフォントで表示します。そのため、環境によって見た目が異なり、意図しない表示になることがあります。font-variant-emojiを使用すると、絵文字の表示方法を明示的に指定できます。
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>① font-variant-emoji: emoji;</h2>
<p class="variant-emoji">☎ ♥ ✈</p>
</div>
<div>
<h2>② font-variant-emoji: text;</h2>
<p class="variant-text">☎ ♥ ✈</p>
</div>
▼ CSS（一部抜粋）
.variant-emoji {
font-variant-emoji: emoji;
}
.variant-text {
font-variant-emoji: text;
}
これは、Unicodeにおける異体字セレクター（バリエーションセレクター）の概念に基づいています。絵文字には、以下の2種類の表示方法があり、通常は環境によって適切なものが選ばれます。
- テキスト（text）表示:
U+FE0Eを適用した場合、絵文字はフォントに依存したモノクロのテキストとして表示されます。 - 絵文字（emoji）表示:
U+FE0Fを適用した場合、カラフルな絵文字として表示されます。
たとえば、U+2665（♥️）にU+FE0Eをつけると「♥」のようなテキスト風のハートに、U+FE0Fをつけると「♥️」のようなカラフルな絵文字になります。
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>Unicode：U+2665U+FE0E（16進数：&#x2665&FE0E）</h2>
<p>♥︎</p>
</div>
<div>
<h2>Unicode：U+2665U+FE0E（16進数：&#x2665&FE0F）</h2>
<p>♥️</p>
</div>
2025年3月現在、Chrome・Edge 131（2024年11月）以降で対応しています。主要なモダンブラウザのなかでは、SafariとFirefoxが未対応となっています。
font-variant-alternates
font-variant-alternatesプロパティを使用すると、特定のフォントで、代替字体（グリフ）を指定できます。ただし、フォント自体が代替字体をサポートしている必要があります。
font-variant-alternates: swash()
その中でも、font-variant-alternates: swash()を使うとスワッシュ字形を適用できます。スワッシュ字形とは、筆記体のように装飾が施された字体のことです。たとえば、アルファベットの「T」の先端がカーブするなどの変化を加えられます。
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>① font-variant-alternates: swash();</h2>
<p class="text swash">こんにちは！ ICS MEDIA です。</p>
</div>
<div>
<h2>② 指定なし</h2>
<p class="text">こんにちは！ ICS MEDIA です。</p>
</div>
▼ CSS（一部抜粋）
@font-face {
font-family: MonteCarlo;
src: url("../../assets/fonts/MonteCarlo-Regular.woff2");
}
@font-feature-values "MonteCarlo" {
@swash {
fancy: 1;
}
}
.text {
font-family: "MonteCarlo", serif;
}
.swash {
font-variant-alternates: swash(fancy);
}
swash()の引数には、@font-feature-valuesアットルールを使って独自の名前を定義できます。詳しくは以下のMDNのページをご確認ください。
font-variant-position
font-variant-position プロパティを使用すると、文字を上付き（superscript）または下付き（subscript）として配置できます。一方、<sup>タグや<sub>タグも、ブラウザのデフォルトスタイルシートでvertical-alignとfont-sizeを調整することで、上付き・下付き文字を実現しています。しかし、font-variant-positionプロパティはあくまでフォントのバリエーションとして視覚的に位置を調整するものです。タグを使用した場合と異なり、行の高さに影響を与えません。そのため、行間を維持しながら上付き・下付きの表記を調整できます。
super： 上付き文字（指数・べき乗表記など）sub： 下付き文字（化学式・数学記号など）
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>① font-variant-position: super;</h2>
<p>円の面積はπr<span class="super">2</span>で求められます</p>
</div>
<div>
<h2>② <sup>タグ</h2>
<p>円の面積はπr<sup>2</sup>で求められます</p>
</div>
<div>
<h2>③ font-variant-position: sub;</h2>
<p>水の化学式はH<span class="sub">2</span>Oです</p>
</div>
<div>
<h2>④ <sub>タグ</h2>
<p>水の化学式はH<sub>2</sub>Oです</p>
</div>
▼ CSS（一部抜粋）
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
font-variant-numeric
font-variant-numeric プロパティを使用すると、数字の表示方法を細かく指定できます。分数（diagonal-fractions, stacked-fractions）やスラッシュ付きゼロ（slashed-zero）などの表現が可能です。ただし、ほとんどの日本語フォントはfont-variant-numericプロパティに対応していません。
また、stacked-fractionsには以下の制限があります。
- 分母が分子より大きい場合にしか適用されない
- 例：
1/2→ ✅ 適用される - 例：
2/1→ ❌ 適用されない
- 分母・分子ともに1桁までしか表示できない
- 例：
3/4→ ✅ 適用される - 例：
12/34→ 🔺 スラッシュ前後の数字のみ適用される（この場合は2/3のみが分数として表示される）
▼ デモのスクリーンショット
▼ HTML（一部抜粋）
<div>
<h2>① font-variant-numeric: diagonal-fractions;</h2>
<p class="diagonal-fractions">12/25</p>
</div>
<div>
<h2>② font-variant-numeric: slashed-zero;</h2>
<p class="slashed-zero">30</p>
</div>
<div>
<h2>③ font-variant-numeric: stacked-fractions;</h2>
<p class="stacked-fractions">10/30</p>
<!-- ↓ スラッシュ前後の数字が同じ（2=2）であるため適用されない -->
<p class="stacked-fractions">12/25</p>
<p class="stacked-fractions">16/75</p>
</div>
<div>
<h2>④ 指定なし</h2>
<p>12/25</p>
<p>30</p>
</div>
▼ CSS（一部抜粋）
.diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.slashed-zero {
font-variant-numeric: slashed-zero;
}
.stacked-fractions {
font-variant-numeric: stacked-fractions;
}
font-variant-ligatures
font-variant-ligaturesプロパティは、合字（リガチャー）を設定するために使用します。リガチャーとは、2文字以上の文字を1つのグリフに結合したものです。たとえば、「fi」や「fl」のような組み合わせがリガチャーとして表示されることがあります。フォントにリガチャー機能が備わっている場合のみ、プロパティが適用されます。
▼ デモのスクリーンショット
font-variant-caps
font-variant-capsプロパティは、アルファベットの大文字・小文字を制御するために使用します。font-variant-capsプロパティを使うと、スモールキャップ（小型の大文字）や、オールスモールキャップなどを適用できます。指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、最適なものが選択されます。
▼ デモのスクリーンショット
テキストの大文字・小文字を制御するプロパティには、text-transformプロパティもあります。こちらはすべてのフォントで動作しますが、単に文字の見た目を変えるだけです。フォントのデザインには依存せず、強制的に大文字・小文字を変更できます。
font-variantとfont-feature-settingsの違い
font-variantプロパティで設定できる内容は、すべてfont-feature-settingsプロパティでも実現できます。font-feature-settingsプロパティは低レベルの機能であり直感的ではない指定方法のため、基本的には高レベルなfont-variantプロパティを使用するのが推奨されます。MDNでは以下のように言及されています。
可能な限り、ウェブの作者は代わりに
font-variant一括指定プロパティ、または関連する個別指定プロパティであるfont-variant-ligatures,font-variant-caps,font-variant-east-asian,font-variant-alternates,font-variant-numeric,font-variant-positionプロパティを使うべきです。
まとめ
今回の記事では、CSSのfont-variantプロパティについてご紹介しました。一部のプロパティは未対応のブラウザがあるほか、日本語フォントでは使えない場合もあります。各フォントが特定のOpenType機能をサポートしているかどうかについては、フォントの提供元や公式サイトをご確認ください。
今後、より多くの環境でfont-variantプロパティが活用できるようになると嬉しいですね！ ウェブ上でフォントを扱う際に、参考になれば幸いです。
