font-weight プロパティは、フォントの太さ(ウェイト)を指定します。
font-weight の使用例
目次
特定の値を指定指定する
1 2 3 4 5 |
p { font-weight: bold; /* 太字のフォント */ } |
数字を指定した使用例
「100」「200」「300」「400」「500」「600」「700」「800」「900」
1 2 3 4 5 |
h1 { font-weight: 700; /* 太字 (通常、400が標準で、700が太字) */ } |
キーワードを使用してウェイトを指定した使用例
1 2 3 4 5 |
h2 { font-weight: lighter; /* より軽いフォント */ } |
inherit キーワードを指定して親要素から継承した使用例
1 2 3 4 5 6 7 8 |
.parent { font-weight: bold; } .child { font-weight: inherit; /* 親要素からフォントの太さを継承 */ } |
initial キーワードを指定して初期値に戻す使用例
1 2 3 4 5 |
p { font-weight: initial; /* 初期値に戻す(通常は normal または規定のウェイトに戻す) */ } |
複数の要素に指定した使用例
1 2 3 4 5 |
h1, h2, h3 { font-weight: bold; /* h1、h2、h3 のすべてを太字に設定 */ } |
要素を指定して強調した使用例
1 2 3 4 5 |
strong { font-weight: bolder; /* テキスト内の strong 要素のフォントを強調表示 */ } |