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

コード

サンプルのコードです。
2-14行目でfont-weightプロパティを指定をしています。

<style>
#sp1{font-weight:normal;}
#sp2{font-weight:bold;}
#sp3{font-weight:lighter;}
#sp4{font-weight:bolder;}
#sp5{font-weight:100;}
#sp6{font-weight:200;}
#sp7{font-weight:300;}
#sp8{font-weight:400;}
#sp9{font-weight:500;}
#sp10{font-weight:600;}
#sp11{font-weight:700;}
#sp12{font-weight:800;}
#sp13{font-weight:900;}
</style>
<body >
<p>
<span id="sp1">normal</span><br>
<span id="sp2">bold</span><br>
<span id="sp3">lighter</span><br>
<span id="sp4">bolder</span><br>
<span id="sp5">100</span><br>
<span id="sp6">200</span><br>
<span id="sp7">300</span><br>
<span id="sp8">400</span><br>
<span id="sp9">500</span><br>
<span id="sp10">600</span><br>
<span id="sp11">700</span><br>
<span id="sp12">800</span><br>
<span id="sp13">900</span>
</p>
</body>

サンプル

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

normal
bold
lighter
bolder
100
200
300
400
500
600
700
800
900