font-weightプロパティは、フォントの太さを指定する際に使用します。
9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、
フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いようです。
span.sample1 {font-weight: normal;
}
span.sample2 {font-weight: bold;
}
span.sample3 {font-weight: lighter;
}
span.sample4 {font-weight: bolder;
}
span.sample100 {font-weight: 100;
}
span.sample200 {font-weight: 200;
}
span.sample300 {font-weight: 300;
}
span.sample400 {font-weight: 400;
}
span.sample500 {font-weight: 500;
}
span.sample600 {font-weight: 600;
}
span.sample700 {font-weight: 700;
}
span.sample800 {font-weight: 800;
}
span.sample900 {font-weight: 900;
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<span class=”sample1″>標準の太さ(400と同じ)</span><br>
<span class=”sample2″>一般的な太字(700と同じ)</span><br>
<span class=”sample3″>相対的に一段階細く</span><br>
<span class=”sample4″>相対的に一段階太く</span><br>
<span class=”sample100″>太さ100</span><br>
<span class=”sample200″>太さ200</span><br>
<span class=”sample300″>太さ300</span><br>
<span class=”sample400″>太さ400</span><br>
<span class=”sample500″>太さ500</span><br>
<span class=”sample600″>太さ600</span><br>
<span class=”sample700″>太さ700</span><br>
<span class=”sample800″>太さ800</span><br>
<span class=”sample900″>太さ900</span>
</body>
</html>
標準の太さ(400と同じ)
一般的な太字(700と同じ)
相対的に一段階細く
相対的に一段階太く
太さ100
太さ200
太さ300
太さ400
太さ500
太さ600
太さ700
太さ800
太さ900