項 目 | 説 明 |
---|---|
記述形式 | セレクタ {font-weight: 値 } |
値 の形式 | 数値 または キーワード (以下の解説を参照) |
初 期 値 | normal |
対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | する |
font-weightプロパティ は,フォントの太さの を指定します。
指定できる値の形式は,以下の通りです。
指定方法 | 説 明 | |
---|---|---|
数値 | 100,200,300,400,500,600,700,800,900 の9段階で,数値が大きくなるほど太くなります。 400 が "normal",700 が "bold" に対応します。
|
|
キーワードで指定 | normal |
標準の太さ です。 数値では,400 に対応します。 (初期値) |
bold |
太字 です。 数値では,700 に対応します。 |
|
lighter |
現在より 1段階(数値で"100")だけ細く します。 |
|
bolder |
現在より 1段階(数値で"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;} のフォント |