【CSS Modules】font-weightアットルール記述子の使い方
font-weightアットルール記述子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
font-weightプロパティは、CSSの@font-faceアットルール内で使用され、Webページで使用するカスタムフォントの重さ（太さ）を定義するための記述子を保持するプロパティです。この記述子を用いることで、提供するフォントファイルがどのようなウェイトに対応しているかをブラウザに正確に伝えることができます。具体的には、フォントの太さを表すキーワード（例えばnormalやbold）や、100から900までの数値（100刻み）で指定します。数値が小さいほど細く、大きいほど太いフォントを意味します。
さらに、font-weightプロパティは、単一のウェイトだけでなく、300 500のように数値でウェイトの範囲を指定することも可能です。これは、特に複数の太さを持つ一つのフォントファイル、いわゆる可変フォント（Variable Fonts）を使用する際に非常に重要です。範囲指定を行うことで、そのフォントが指定された範囲内の任意の太さに対応できることを示し、より柔軟なタイポグラフィ表現を可能にします。
ブラウザは、この@font-faceルールで定義されたfont-weightの情報をもとに、スタイルシートで実際に指定されたfont-weightの値に最も適したフォントファイルを選択して適用します。これにより、開発者はWebサイトのデザインに合わせて、カスタムフォントの太さをきめ細かく制御し、視覚的に魅力的なWebページを作成することができます。このプロパティは、ユーザーが望むフォントの表現を正確に実現するために不可欠な要素です。
公式リファレンス: font-weight
構文(syntax)
1@font-face { 2 font-family: "MyFont"; 3 src: url("myfont.woff2") format("woff2"); 4 font-weight: 400; 5}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません