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段階太くします。
値を継承する

コード

サンプルのコードです。
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

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)



△上に戻る