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

font-variantプロパティは、フォントの特殊なバリアント（異体字）に関する設定をまとめて指定するためのプロパティです。これは、CSS Modulesにおいてフォントの表示を詳細に制御するために提供されており、主に合字（ligatures）の有効・無効、大文字・小文字の表示方法、数字の書式、東アジア言語における特定の文字表現など、フォントが持つ多様な表示オプションを一括して設定する目的で使用されます。

具体的には、font-variant-ligatures（合字）、font-variant-caps（大文字・小文字）、font-variant-numeric（数字）、font-variant-east-asian（東アジア文字）、font-variant-alternates（代替グリフ）といった個別のフォントバリアントプロパティの値をまとめて設定できるショートハンドプロパティとして機能します。例えば、font-variant: small-caps;と記述することで、英字の小文字を小さめの大文字で表示する「スモールキャップス」というスタイルを適用できます。また、font-variant: proportional-nums;と指定すれば、数字の文字幅をプロポーショナル（文字によって幅が異なる）に設定することが可能です。

このプロパティを使用することで、テキストの視覚的な表現を豊かにし、デザイナーが意図するタイポグラフィ（文字の組版）デザインをWeb上で正確に再現することが可能になります。通常、デフォルト値はnormalであり、特殊なフォントバリアントは適用されません。noneを指定すると、フォントバリアント機能はすべて無効になります。複数のフォントバリアントに関する設定を一行で簡潔に記述できるため、スタイルシートの記述を効率化し、可読性を向上させるのに役立ちます。

Copy
1font-variant: small-caps;

引数なし

引数はありません

戻り値なし

戻り値はありません