【CSS Modules】font-feature-settingsプロパティの使い方

font-feature-settingsプロパティは、OpenTypeフォントが持つ高度な書体機能の有効・無効を制御するためのプロパティです。ウェブページに表示されるテキストは、通常、フォントの基本的な形状でレンダリングされますが、OpenTypeフォントには、文字の組み合わせをより美しく見せるための「合字（リガチャ）」、数字の表示形式を変更する「オールドスタイル数字」や「等幅数字」、大文字を小さく表示する「スモールキャップ」など、多様な高度な機能が組み込まれています。

このプロパティを使用することで、これらのフォント機能にCSSから直接アクセスし、詳細にカスタマイズすることが可能になります。例えば、合字を有効にするには 'liga' 1、無効にするには 'liga' 0 のように、OpenTypeフォントの機能を表す4文字のタグと、その機能の状態を示す数値を組み合わせて指定します。複数の機能を同時に指定する場合は、カンマで区切って記述します。

多くのタイポグラフィ機能は、font-variant-ligaturesやfont-variant-numericといった、よりセマンティックで分かりやすいCSSプロパティでも制御できます。しかし、font-feature-settingsプロパティは、それらのプロパティが対応していない特定のフォント機能や、より細かく直接的な制御が必要な場合に利用されます。使用するフォントが目的の機能に対応していない場合、このプロパティを設定しても視覚的な変化は現れませんので、フォントの仕様を確認することが重要です。また、このプロパティの過度な使用は、ブラウザのレンダリングパフォーマンスに影響を与える可能性があるため、必要な範囲での利用が推奨されます。

Copy
1font-feature-settings: "liga" 0;

引数なし

引数はありません

戻り値なし

戻り値はありません