【CSS Modules】font-variation-settingsアットルール記述子の使い方
font-variation-settingsアットルール記述子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
font-variation-settingsプロパティは、可変フォント（Variable Fonts）の特定のデザイン特性である「軸」の値を設定するためのプロパティです。可変フォントは、単一のフォントファイル内に太さ、幅、傾き、あるいはその他のデザイナー定義の多様なデザインバリエーションを内包できる新しい形式のフォントです。このプロパティを使用することで、それらのバリエーションを細かく、かつ柔軟に制御することが可能になります。
具体的には、4文字のCSS軸タグ（例: 'wght'は太さ、'wdth'は幅、'slnt'は傾き）と、その軸に対応する数値を組み合わせて指定します。これにより、フォントの太さを従来のfont-weightプロパティよりもさらに細かく調整したり、フォントの幅を伸縮させたりするなど、フォントデザイナーが定義した独自の軸に沿って、様々な視覚的調整を動的に適用することができます。
従来のWebフォントでは、異なる太さや幅を持つ複数のフォントファイルを読み込む必要がありましたが、可変フォントとfont-variation-settingsプロパティを組み合わせることで、単一のフォントファイルで豊富なデザインバリエーションを実現できます。これは、Webサイトの読み込み速度の向上や、より表現豊かなタイポグラフィの実現に貢献します。このプロパティを適用するには、使用するフォントが可変フォントであること、およびターゲットとなるブラウザが可変フォントに対応していることが前提となります。
公式リファレンス: font-variation-settings
構文(syntax)
1font-variation-settings: "wght" 700;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません