font-weight

CSSプロパティ「font-weight」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

font-weight

フォントの太さを指定するプロパティ。

数値もしくは太さを表す語句により、フォントの太さを指定することができる。細さ、太さを細かく指定することができるが、元々フォントに複数の太さが用意されていないことが多く、「normal」もしくは「bold」を指定した場合と見た目は変わらないことが多い。

数値で指定 100から900までを100単位で指定。400が標準となり、それより少ない場合は細く、多い場合は太くなる。
語句で指定 normal(標準)、bold(太字)、lighter(1つ細く)、bolder(1つ太く)のいずれかを指定。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { font-weight:bold; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

bold(太字)を指定

サンプル(B)

[CSSの記述]

.sampleB { font-weight:200; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

200を指定。見た目は変わらないことが多い。