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

文字の太さを指定するサンプルです。

文字の太さを英字で指定(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 文字に線を引くサンプル

△上に戻る