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

font-weightプロパティは、テキストのフォントの太さ（ウェイト）を保持するプロパティです。このプロパティを使用することで、ウェブページ上の文字を標準の太さにしたり、太字にしたり、あるいはより細くしたり、より太くしたりと、様々な視覚的な強調表現を行うことができます。

フォントの太さは、主にキーワードまたは数値で指定します。キーワードとしては、「normal」で標準の太さを、「bold」で太字を指定できます。他にも、親要素の太さに対して相対的に太くする「bolder」や、相対的に細くする「lighter」も利用可能です。数値で指定する場合は、100から900までの100刻みの値を使用します。例えば、「400」は「normal」と、「700」は「bold」と同じ太さに相当します。一般的に、数値が小さいほどフォントは細く、大きいほど太くなります。

ただし、指定した太さのフォントがシステムやウェブフォントとして利用できない場合、ブラウザは最も近い太さのフォントを使用したり、既存のフォントを合成して太さを再現しようと試みます。そのため、必ずしも指定通りの太さで表示されるとは限りません。このプロパティは継承されるため、親要素で設定されたfont-weightの値は、特に指定がない限り子要素にも適用されます。ウェブページの可読性やデザインの一貫性を高めるために、このプロパティは非常に頻繁に利用されます。

Copy
1p {
2  font-weight: bold;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません