【CSS Modules】font-variant-alternatesプロパティの使い方

font-variant-alternatesプロパティは、フォントが持つ「代替グリフ」と呼ばれる、通常の文字とは異なるバリエーションの表示を制御するプロパティです。同じ文字でも、デザインや表現の意図に合わせて異なる形を持つことがあり、このプロパティはそのような異体字をどのように表示するかを指定するために使用されます。

具体的には、特定の書式セット（stylistic()）、文体セット（styleset()）、文字飾り（character-variant()）、スワッシュ（飾り文字、swash()）、タイトル用大文字（titling-caps）、オーナメント（装飾文字、ornaments()）、アノテーション（注釈文字、annotation()）など、多岐にわたる種類の代替グリフのオン/オフや適用方法を細かく指定できます。これにより、デザイナーが意図した文字の見た目を正確に再現したり、テキストに独自の個性を加えたりすることが可能になります。

このプロパティを使用することで、ロゴや見出し、特定のブランドイメージを表現したいテキストなどにおいて、フォントが本来持つ豊かな表現力を最大限に引き出すことができます。値には、デフォルトの表示を意味するnormalのほか、先述のような機能名を関数形式で指定します。ただし、このプロパティの効果は、使用するフォント自体が指定された代替グリフに対応している場合にのみ発揮されますので、フォントの選択も重要です。

Copy
1selector {
2  font-variant-alternates: stylistic(ss01);
3}

引数なし

引数はありません

戻り値なし

戻り値はありません