| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {font-weight: 値 } |
| 値 の形式 | 数値 または キーワード （以下の解説を参照） |
| 初 期 値 | normal |
| 対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | する |
font-weightプロパティ は，フォントの太さの を指定します。
指定できる値の形式は，以下の通りです。
| 指定方法 | 説 明 | |
|---|---|---|
| 数値 | 100，200，300，400，500，600，700，800，900 の９段階で，数値が大きくなるほど太くなります。 400 が "normal"，700 が "bold" に対応します。
|
|
| キーワードで指定 | normal |
標準の太さ です。 数値では，400 に対応します。 （初期値） |
bold |
太字 です。 数値では，700 に対応します。 |
|
lighter |
現在より １段階（数値で"100"）だけ細く します。 |
|
bolder |
現在より １段階（数値で"100"）だけ太く します。 |
|
たとえば，次のように使用できます。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
.fw1 {font-weight: normal;}
.fw2 {font-weight: bold;}
.fw3 {font-weight: 100;}
.fw4 {font-weight: 200;}
.fw5 {font-weight: 300;}
.fw6 {font-weight: 400;}
.fw7 {font-weight: 500;}
.fw8 {font-weight: 600;}
.fw9 {font-weight: 700;}
.fw10 {font-weight: 800;}
.fw11 {font-weight: 900;}
-->
</style> |
| HTML <body> ～ </body> |
<span class="fw1">{font-weight: normal;} のフォント</span><br>
<span class="fw2">{font-weight: bold;} のフォント</span><br>
<span class="fw3">{font-weight: 100;} のフォント</span><br>
<span class="fw4">{font-weight: 200;} のフォント</span><br>
<span class="fw5">{font-weight: 300;} のフォント</span><br>
<span class="fw6">{font-weight: 400;} のフォント</span><br>
<span class="fw7">{font-weight: 500;} のフォント</span><br>
<span class="fw8">{font-weight: 600;} のフォント</span><br>
<span class="fw9">{font-weight: 700;} のフォント</span><br>
<span class="fw10">{font-weight: 800;} のフォント</span><br>
<span class="fw11">{font-weight: 900;} のフォント</span><br> |
| ブラウザー 表示例 |
|---|
| {font-weight: normal;} のフォント
{font-weight: bold;} のフォント {font-weight: 100;} のフォント {font-weight: 200;} のフォント {font-weight: 300;} のフォント {font-weight: 400;} のフォント {font-weight: 500;} のフォント {font-weight: 600;} のフォント {font-weight: 700;} のフォント {font-weight: 800;} のフォント {font-weight: 900;} のフォント |