font-weight
font-weightは、文字の太さを指定するスタイルです。
解説
文字の太さの指定方法は、キーワード、数値の２種類があります。
構文
構文は以下になります。
font-weight: 値;
値
font-weightには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| キーワードで指定 | 文字の太さをキーワードで指定します。 以下４種類のキーワードが指定できます。 normal：標準の太さ（数値指定だと400の太さ）※デフォルト値 bold：太字（数値指定だと700の太さ） lighter：現在の太さから一段階細くした太さ bolder： 現在の太さから一段階太くした太さ （例）font-weight:bold; |
| 数値で指定 | 文字の太さを数値で指定します。 指定できる数値は、100, 200, 300, 400, 500, 600, 700, 800, 900のいずれかです。 ※400が標準の太さです。 （例）font-size:700; |
font-weightの初期値は「normal」です。
サンプル
文字の太さをを「bold」にする
.sample01 {
font-weight:bold;
}
<div class="sample01">文字サンプルです。</div>
文字サンプルです。
文字の太さをを「700」にする
.sample02 {
font-weight:700;
}
<div class="sample02">文字サンプルです。</div>
文字サンプルです。
備考
- font-weightでは9段階の指定ができますが、使用しているフォントが対応している事が前提です。
- 多くのフォントでは、normal(400)とbold(700)の２つぐらいしか対応していないので、実際はこの２種類ぐらいしか使用することはありません。
関連項目
- font：フォント関連のスタイルを一括して指定する
- font-family：フォントの種類を指定する
- font-size：文字のサイズを指定する
- font-style：文字のスタイルを指定する
- font-variant：フォントをスモールキャップにする
- font-weight：文字の太さを指定する
