フォントの太さ(ウエイト)を指定する

CSS - font-weight

概要

CSSプロパティ「font-weight」は、フォントの太さ(ウエイト)を指定することができます。

<p class="font-bold">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-bold {
  font-weight: bold;
}
</style>

値の指定方法

{ font-weight: 値}

数値なども用意されていますが、フォント側が対応していない場合は近い数値に変換されてしまいますので、実際は「normal」と「bold」を使用することが多いでしょう。

説明
normal通常の太さ。400に相当
bold太字になる。700に相当
数値100,200,...700まで100単位で指定できます。
lighter(指定できるフォントの中で)継承値よりも一段階細く指定できる
bolder(指定できるフォントの中で)継承値よりも一段階太く指定できる

プロパティの種類について

「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする
<p class="font-normal">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<p class="font-bold">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<p class="font-600">
都道府県は、北海道、青森県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-normal {
  font-weight: normal;
}
.font-bold {
  font-weight: bold;
}
.font-600 {
  font-weight: 600;
}
</style>

使用例

文章の一部を太字にしたり、見出しを太くする場合に使用する例です。

<p class="bold">今日の天気</p>
<p>今日の東京の天気は<span class="bold">晴れ</span>です</p>
<p>今日の長野の天気は<span class="bold">雨</span>です</p>
<style>
  .bold {
    font-weight: bold;
  }
</style>

仕様書

関連CSSプロパティ