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

font-variation-settingsプロパティは、可変フォントの特定の軸設定を保持するプロパティです。可変フォントとは、単一のフォントファイル内に様々なデザインバリエーション（太さ、幅、傾きなど）を内包し、それらを連続的に変化させることができる先進的なフォント技術です。このプロパティを使用することで、CSSの標準的なプロパティであるfont-weightやfont-stretch、font-styleでは直接制御できない、可変フォントが持つ「軸」と呼ばれるデザイン要素を細かく調整することが可能になります。

値は、通常、シングルクォーテーションで囲まれた4文字の軸タグと、それに続く数値で構成されるペアを複数指定します。例えば、'wght' 700はフォントのウェイト（太さ）を700に設定し、'wdth' 120はフォントの幅を120に設定するといった具合です。これにより、ウェブデザイナーはフォントのデザインに高い柔軟性をもたらし、より洗練されたタイポグラフィの表現を実現できます。

しかし、このプロパティはフォントの低レベルな制御を提供するため、font-weightやfont-stretch、font-styleなどの標準的なプロパティで目的が達成できる場合は、そちらの使用が推奨されます。これらの高レベルなプロパティは、特定の一般的なデザイン調整をより直感的かつ標準的な方法で実現します。font-variation-settingsプロパティは、CSSの標準プロパティでは対応していないカスタム軸を調整したい場合や、複数の軸を組み合わせてより複雑で緻密なデザイン制御を行いたい場合に特に有用です。ブラウザによっては可変フォントおよびこのプロパティの対応状況が異なるため、使用する際はターゲットとする環境の互換性にも注意が必要です。

Copy
1font-variation-settings: "wght" 700, "wdth" 120;

引数なし

引数はありません

戻り値なし

戻り値はありません