CSS 文字の太さを指定するサンプル(font-weight) |

CSSの文字の太さを指定するサンプルです。
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

サンプル

font-weightのサンプルです。

1番上は、normalです。標準の太さです。
2番目は、boldです。太字です。
3番目は、lighterです。継承値の太さより1段階細くします。
4番目は、bolderです。継承値の太さより1段階太くします。
5-7番目は、数値を指定しています。

コード

上記サンプルのコードです。

<style>
#p1{
	font-weight:normal;
}
#p2{
	font-weight:bold;
}
#p3{
	font-weight:lighter;
}
#p4{
	font-weight:bolder;
}
#p5{
	font-weight:100;
}
#p6{
	font-weight:400;
}
#p7{
	font-weight:900;
}
</style>

<p id="p1">normal</p>
<p id="p2">bold</p>
<p id="p3">lighter</p>
<p id="p4">bolder</p>
<p id="p5">100</p>
<p id="p6">400</p>
<p id="p7">900</p>