CSS ・ 文字・フォント
font-weight
文字の太さ
文字の太さを指定します。normal（400）と bold（700）のほか、100〜900 の数値で細かく指定できます。
01
サンプルコード
HTML
1<p class="w300">細い文字（300）</p>
2<p class="w400">標準の文字（400）</p>
3<p class="w700">太い文字（700）</p>
CSS
1.w300 {
2 font-weight: 300;
3}
4.w400 {
5 font-weight: 400;
6}
7.w700 {
8 font-weight: 700;
9}
02
実行結果
ブラウザでの表示
03
解説
font-weight は文字の太さを指定するプロパティです。数値は100刻みで、400 が標準、700 が太字にあたります。
実際にその太さで表示されるのは、フォントにその太さのデータがある場合だけです。ない場合は近い太さで代用されます。
Webフォントを使うときは、使いたい太さを読み込んでおく必要があります（例：Google Fonts の wght@400;700）。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
normal | 標準（400と同じ） |
bold | 太字（700と同じ） |
100〜900 | 数値で細かく指定 |
bolder / lighter | 親要素より1段階太く / 細く |
見出しの太字を解除する
見出しは既定で太字です。細い見出しにしたいときは normal を指定します。
CSS
1h1 {
2 font-weight: normal;
3}
注意点
- 01太さを数値で指定しても、フォントがその太さを持っていなければ変化しないことがあります。
- 02重要な語句には、見た目だけでなく strong 要素を使って意味も伝えます。