font-weightプロパティ

最終更新日：2023-11-18
公開日：2016-07-23

font-weightプロパティはフォントの太さを指定するプロパティです。

初期値
normal
継承
継承あり
適用できる要素
全要素

font-weightプロパティに指定できる値

font-weightプロパティには次の値を設定することができます。

値	内容
`normal`	初期値。数値「`400`」の指定に該当。
`bold`	太字。数値「`700`」の指定に該当。
`bolder`	親要素から引き継いだ太さよりも1段階太く表示します。
`lighter`	親要素から引き継いだ太さよりも、1段階細く表示します。
`数値`	`100`〜`900`の間で任意の太さを指定します。

数値の指定よる太さのバリエーション

font-weightプロパティの値を数値で指定する場合、以下の100〜900の範囲で指定することができます。

値	内容
`100`	太さ「`Thin`」に該当。最も細い指定。
`200`	太さ「`ExtraLight`」に該当。
`300`	太さ「`Light`」に該当。
`400`	太さ「`Regular`」に該当。`normal`の指定と同等。
`500`	太さ「`Medium`」に該当。
`600`	太さ「`SemiBold`」に該当。
`700`	太さ「`Bold`」に該当。`bold`の指定と同等。
`800`	太さ「`ExtraBold`」に該当。
`900`	太さ「`Black`」に該当。最も太い指定。

指定した数値の太さで表示されるかは使用するフォントに依存します。
以下の表示例はフォント「Noto Sans Japanese」でfont-weightプロパティの値を100〜900で指定してブラウザで表示した例です。

CSSとHTMLのコード例は下記の内容になります。
赤字の箇所はfont-weightプロパティの指定です。

CSS コード例

@font-face {
  src: url("./fonts/NotoSansJP/NotoSansJP.woff") format("woff");
  font-family:'NotoSansJP';
}
.sample1 p {
  font-family: 'NotoSansJP', sans-serif;
  font-size: 40px;
  text-indent: -0.1em;
  color: #222;
}
.sample1 .text1 {
  font-weight: 100;
}
.sample1 .text2 {
  font-weight: 200;
}
.sample1 .text3 {
  font-weight: 300;
}
.sample1 .text4 {
  font-weight: 400;
}
.sample1 .text5 {
  font-weight: 500;
}
.sample1 .text6 {
  font-weight: 600;
}
.sample1 .text7 {
  font-weight: 700;
}
.sample1 .text8 {
  font-weight: 800;
}
.sample1 .text9 {
  font-weight: 900;
}

HTML コード例

<div class="sample1">
  <section>
    <h2>Thin 100</h2>
    <p class="text1">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>ExtraLight 200</h2>
    <p class="text2">こちらはフォントの太さを見るサンプルです</p>
    </section>
  <section>
    <h2>ExtraLight 300</h2>
    <p class="text3">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>Regular 400</h2>
    <p class="text4">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>Medium 500</h2>
    <p class="text5">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>SemiBold 600</h2>
    <p class="text6">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>Bold 700</h2>
    <p class="text7">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>ExtraBold 800</h2>
    <p class="text8">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>Black 900</h2>
    <p class="text9">こちらはフォントの太さを見るサンプルです</p>
  </section>
</div>

lighter と bolder の指定

「lighter」は親要素から引き継いだfont-weightプロパティの値より一段階細いフォントを表示し、「bolder」は反対に一段階太いフォントを表示します。

例えば、親要素でfont-weightプロパティにnormalを指定しているとき、子孫要素でfont-weightプロパティにlighterとbolderを指定すると以下のように調整されます。

CSSとHTMLのコード例は下記の内容になります。
赤字の箇所はfont-weightプロパティの指定です。

CSS コード例

@font-face {
  src: url("./fonts/NotoSansJP/NotoSansJP.woff") format("woff");
  font-family:'NotoSansJP';
}
.sample2 section {
  font-weight: 400;
}
.sample2 p {
  font-family: 'NotoSansJP', sans-serif;
  font-size: 40px;
  text-indent: -0.1em;
  color: #222;
}
.sample2 .text1 {
  font-weight: lighter;
}
.sample2 .text2 {
  font-weight: normal;
}
.sample2 .text3 {
  font-weight: bolder;
}

HTML コード例

<div class="sample2">
  <section class="first">
    <h2>lighter</h2>
    <p class="text1">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>normal</h2>
    <p class="text2">こちらはフォントの太さを見るサンプルです</p>
  </section>
  <section>
    <h2>bolder</h2>
    <p class="text3">こちらはフォントの太さを見るサンプルです</p>
  </section>
</div>

記事一覧