Dec. 7th,2020
プロパティについて
＃
＃
値
| 値 | 説明 |
|---|---|
| “<font-weight-absolute>”値 | |
| 100 | 超極細 (“Thin”) |
| 200 | 極細 (“Extra Light”) |
| 300 | 細 (“Light”) |
| 400 | 標準 (“Normal”) |
| 500 | 中 (“Medium”) |
| 600 | 中太 (“Semi Bold”) |
| 700 | 太 (“Bold”) |
| 800 | 極太 (“Ultra Bold”) |
| 900 | 超極太 (“Heavy”) |
<number> |
“1”以上、“1000”以下の“<number>”値で文字の太さを指定 |
| normal | 標準の太さ (“400”と同じ) |
| bold | 太字 (“700”と同じ) |
| 相対値 | |
| bolder | 親要素から継承した値よりも太い値 |
| lighter | 親要素から継承した値よりも細い値 |
| 他の値 | |
| 共通キーワード | |
“bolder”と“lighter”は親要素から継承した値を以下で示した数値に置き換えて使用します。
| 継承値 | “bolder” | “lighter” |
|---|---|---|
| “100”未満 | “400” | 継承値と同じ |
| “100”以上、“350”未満 | “400” | “100” |
| “300”以上、“550”未満 | “700” | “100” |
| “550”以上、“750”未満 | “900” | “400” |
| “750”以上、“900”未満 | “900” | “700” |
| “900”以上 | 継承値と同じ | “700” |
フォントは9段階も太さが用意されていない場合がほとんどであり、テキストを表示するのに使用されているフォントで指定した値に一致する太さが使用できない場合はそれに近い太さが使用されます。指定された値によって利用できるフォントの太さの探し方は異なり、以下で示した方法で利用可能な太さが探されます。
- 指定した値が“400”より小さい場合
- 指定した値と同じかそれより細い太さを降順で探し、なければ指定した値よりも太い太さを利用可能な太さが見つかるまで昇順で探します。
- 指定した値が“400”以上、“500”以下の場合
- 指定した値と同じかそれより太い太さを“500”まで探し、なければ指定した値よりも細い太さを降順で探し、なければ“500”よりも太い太さを利用可能な太さが見つかるまで探します。
- 指定した値が“500”より大きい場合
- 指定した値と同じかそれより太い太さを昇順で探し、なければ指定した値よりも細い太さを利用可能な太さが見つかるまで降順で探します。
＃
使用例
＃
数値で指定する
.font-100 { font-weight: 100;}
.font-200 { font-weight: 200;}
.font-300 { font-weight: 300;}
.font-400 { font-weight: 400;}
.font-500 { font-weight: 500;}
.font-600 { font-weight: 600;}
.font-700 { font-weight: 700;}
.font-800 { font-weight: 800;}
.font-900 { font-weight: 900;}
<p class="font-100">font-weight: 100;</p>
<p class="font-200">font-weight: 200;</p>
<p class="font-300">font-weight: 300;</p>
<p class="font-400">font-weight: 400;</p>
<p class="font-500">font-weight: 500;</p>
<p class="font-600">font-weight: 600;</p>
<p class="font-700">font-weight: 700;</p>
<p class="font-800">font-weight: 800;</p>
<p class="font-900">font-weight: 900;</p>
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;
＃
＃
相対値で指定する
.font-bolder { font-weight: bolder;}
.font-lighter { font-weight: lighter;}
文字の太さを“300”に指定した“div”要素
<div>
<p>この“div”要素の文字の太さは“300”です。</p>
<p class="font-lighter">font-weight: lighter;</p>
<p class="font-bolder">font-weight: bolder;</p>
</div>
文字の太さを“600”に指定した“div”要素
<div>
<p>この“div”要素の文字の太さは“600”です。</p>
<p class="font-lighter">font-weight: lighter;</p>
<p class="font-bolder">font-weight: bolder;</p>
</div>
この“div”要素の文字の太さは“300”です。
font-weight: lighter;
font-weight: bolder;
文字の太さを“600”に指定した“div”要素
この“div”要素の文字の太さは“600”です。
font-weight: lighter;
font-weight: bolder;
