文字の太さを設定する

2015年6月16日

<h2>タグには、デフォルトで太字が設定されています。
この太さに関係するプロパティは「font-weight」です。

このプロパティの設定値は以下です。
値：
normal(数値400)
bold　一般的な太さ(数値700)
bolder(相対的に1段階太く)
lighter(相対的に1段階細く)
数値 100~900(100単位)

サンプルコードは以下の通りです。

    #container{
        background-color: greenyellow;
    }

    p{font-size:16px;}
    p.normal{font-weight:normal;}
    p.bolder{font-weight:bolder;}
    p.lighter{font-weight:lighter;}
    p.bold{font-weight:bold;}
    p.weight100{font-weight: 100;}
    p.weight200{font-weight: 200;}
    p.weight300{font-weight: 300;}
    p.weight400{font-weight: 400;}
    p.weight500{font-weight: 500;}
    p.weight600{font-weight: 600;}
    p.weight700{font-weight: 700;}
    p.weight800{font-weight: 800;}
    p.weight900{font-weight: 900;}

#container{

background-color: greenyellow;

}

p{font-size:16px;}

p.normal{font-weight:normal;}

p.bolder{font-weight:bolder;}

p.lighter{font-weight:lighter;}

p.bold{font-weight:bold;}

p.weight100{font-weight: 100;}

p.weight200{font-weight: 200;}

p.weight300{font-weight: 300;}

p.weight400{font-weight: 400;}

p.weight500{font-weight: 500;}

p.weight600{font-weight: 600;}

p.weight700{font-weight: 700;}

p.weight800{font-weight: 800;}

p.weight900{font-weight: 900;}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">

<p class="normal">(normal)文字の太さのサンプル</p>
<p class="bolder">(bolder)文字の太さのサンプル</p>
<p class="lighter">(lighter)文字の太さのサンプル</p>
<p class="bold">(bold)文字の太さのサンプル</p>
<p class="weight100">(weight:100)文字の太さのサンプル</p>
<p class="weight200">(weight:200)文字の太さのサンプル</p>
<p class="weight300">(weight:300)文字の太さのサンプル</p>
<p class="weight400">(weight:400)文字の太さのサンプル</p>
<p class="weight500">(weight:500)文字の太さのサンプル</p>
<p class="weight600">(weight:600)文字の太さのサンプル</p>
<p class="weight700">(weight:700)文字の太さのサンプル</p>
<p class="weight800">(weight:800)文字の太さのサンプル</p>
<p class="weight900">(weight:900)文字の太さのサンプル</p>

</div>
    
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

(normal)文字の太さのサンプル

(bolder)文字の太さのサンプル

(lighter)文字の太さのサンプル

(bold)文字の太さのサンプル

(weight:100)文字の太さのサンプル

(weight:200)文字の太さのサンプル

(weight:300)文字の太さのサンプル

(weight:400)文字の太さのサンプル

(weight:500)文字の太さのサンプル

(weight:600)文字の太さのサンプル

(weight:700)文字の太さのサンプル

(weight:800)文字の太さのサンプル

(weight:900)文字の太さのサンプル

</div>

</body>

</html>

だいたい、このプロパティには、「normal」か「bold」を設定します。
もともと使用しているフォントに、指定した太さのフォントが無い場合は
文字の太さは変わりません。