font-weightプロパティ
font-weight : 値 |
font-weightプロパティは、文字の太さを指定します。
値 | 説明 |
---|---|
数値 | 100,200,300,400,500,600,700,800,900 標準の太さが400です。数値が大きくなるほど文字が太くなります。 |
normal | 標準の太さです。数値では400です。(初期値) |
bold | 太字です。数値では700です。 |
lighter | 継承値の太さより1段階細くします。 |
bolder | 継承値の太さより1段階太くします。 |
値を継承する |
- 文字の太さを指定します。
- 以下はMDNのfont-weightプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight
文字の太さを指定するサンプルです。
文字の太さを英字で指定(normal,bold,lighter,bolder)
<style>
#p1 {
font-weight: normal; /* 標準の太さ */
}
#p2 {
font-weight: bold; /* 太字 */
}
#p3 {
font-weight: lighter; /* 継承値の太さより1段階細い */
}
#p4 {
font-weight: bolder; /* 継承値の太さより1段階太い */
}
</style>
<p id="p1">normal</p>
<p id="p2">bold</p>
<p id="p3">lighter</p>
<p id="p4">bolder</p>
文字の太さを数字で指定
<style>
#p5 {
font-weight: 100;
}
#p6 {
font-weight: 400;
}
#p7 {
font-weight: 900;
}
</style>
<p id="p5">100</p>
<p id="p6">400</p>
<p id="p7">900</p>
関連の記事
CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS text-decoration 文字に線を引くサンプル