CSS font-weight 文字の太さを指定する

CSSのfont-weightプロパティで、文字の太さを指定するサンプルです。

目次

仕様 font-weightプロパティの仕様
サンプル font-weightのサンプル

font-weightプロパティの仕様

font-weight : 値

font-weightプロパティは、文字の太さを指定します。

説明
数値 100,200,300,400,500,600,700,800,900
標準の太さが400です。数値が大きくなるほど文字が太くなります。
normal 標準の太さです。数値では400です。(初期値)
bold 太字です。数値では700です。
lighter 継承値の太さより1段階細くします。
bolder 継承値の太さより1段階太くします。
値を継承する

font-weightのサンプル

font-weightのサンプルです。

<style>
#p1{font-weight:normal;} /* 標準の太さ */
#p2{font-weight:bold;} /* 太字 */
#p3{font-weight:lighter;} /* 継承値の太さより1段階細く */
#p4{font-weight:bolder;} /* 継承値の太さより1段階太く */
#p5{font-weight:100;} /* 100を指定 */
#p6{font-weight:400;} /* 400 */
#p7{font-weight:900;} /* 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>

以下のイメージになります。

関連の記事

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

△上に戻る