文字の太さ

ここではCSSで文字の太さを設定する方法を解説していきます。文字の太さを設定する際は、キーワードや数値で設定することができます。

font-weight

CSSプロパティfont-weightを使って文字の太さを設定してみましょう。font-weightに与える値として100～900の100刻みの数値か、normal,boldなどキーワードを入力します。キーワードの種類は以下のようになります。

数値で設定できるとは説明しましたが、100から900の9種類のフォントを表示できるブラウザは現状少ないようですので太字に設定したい場合はキーワードboldを使用することをオススメします。

CSSプロパティ	解説
font-weight	文字の太さ

font-weightのキーワード	解説
normal	通常の太さ：初期値（数値400と同じ）
bold	太字（数値700と同じ）
bolder	継承した値より太く
lighter	継承した値より細く

HTMLコード記述例

<p class="w-normal">normalの太さ</p>
<p class="w-bold">boldの太さ</p>
<p class="w-bolder">bolderの太さ</p>
<p class="w-lighter">lighterの太さ</p>
<p class="w100">数値100の太さ</p>
<p class="w200">数値200の太さ</p>
<p class="w300">数値300の太さ</p>
<p class="w400">数値400の太さ</p>
<p class="w500">数値500の太さ</p>
<p class="w600">数値600の太さ</p>
<p class="w700">数値700の太さ</p>
<p class="w800">数値800の太さ</p>
<p class="w900">数値900の太さ</p>

外部ファイルCSS記述例

@charset "utf-8";

p.w-normal {font-weight: normal;}
p.w-bold {font-weight: bold;}
p.w-bolder {font-weight: bolder;}
p.w-lighter {font-weight: lighter;}
p.w100 {font-weight: 100;}
p.w200 {font-weight: 200;}
p.w300 {font-weight: 300;}
p.w400 {font-weight: 400;}
p.w500 {font-weight: 500;}
p.w600 {font-weight: 600;}
p.w700 {font-weight: 700;}
p.w800 {font-weight: 800;}
p.w900 {font-weight: 900;}

ブラウザ表示例

normalの太さ

boldの太さ

bolderの太さ

lighterの太さ

数値100の太さ

数値200の太さ

数値300の太さ

数値400の太さ

数値500の太さ

数値600の太さ

数値700の太さ