font-weight:太さ
太さ:
| normal |
通常の状態(デフォルト) |
| bold |
一般的な太字 |
| lighter |
フォントファミリー中に異なる太さのフォントが用意されている場合に、1段階細いフォントになります |
| bolder |
〃 1段階太いフォントになります |
| 100 |
|
| 200 |
|
| 300 |
|
| 400 |
←normalと同じ太さ |
| 500 |
|
| 600 |
|
| 700 |
←boldと同じ太さ |
| 800 |
|
| 900 |
|
font-weightプロパティで、フォントの太さを指定します。
キーワードで指定する場合
キーワードは「normal」、「bold」、「lighter」、「bolder」の4種類があります。
・ { font-weight:bold; }
・ { font-weight:bolder; }
数値のキーワードで指定する場合
100〜900の範囲内で、数値で指定することができます。
ただし、上記の9種類の数値でしか指定できません。(これ以外の数値は無効になります)
また、この9種類のすべての太さを持つフォントはないので、太さを指定しても意図する太さにはならない場合があります。
・ { font-weight:100; }
・ { font-weight:700; }
MS 明朝 normal bold lighter bolder
100 200 300 400 500 600 700 800 900
Times New Roman normal bold lighter bolder
100 200 300 400 500 600 700 800 900
<STYLE type="text/css">
<!--
.case11 {
font-weight:normal; }
.case12 {
font-weight:bold; }
.case13 {
font-weight:lighter; }
.case14 {
font-weight:bolder; }
.case21 {
font-weight:100; }
.case22 {
font-weight:200; }
.case23 {
font-weight:300; }
.case24 {
font-weight:400; }
.case25 {
font-weight:500; }
.case26 {
font-weight:600; }
.case27 {
font-weight:700; }
.case28 {
font-weight:800; }
.case29 {
font-weight:900; }
-->
</STYLE>
<P><FONT face="MS 明朝">MS 明朝
<SPAN
class="case11">normal</SPAN>
<SPAN
class="case12">bold</SPAN>
<SPAN
class="case13">lighter</SPAN>
<SPAN
class="case14">bolder</SPAN><BR>
<SPAN
class="case21">100</SPAN>
<SPAN
class="case22">200</SPAN>
<SPAN
class="case23">300</SPAN>
<SPAN
class="case24">400</SPAN>
<SPAN
class="case25">500</SPAN>
<SPAN
class="case26">600</SPAN>
<SPAN
class="case27">700</SPAN>
<SPAN
class="case28">800</SPAN>
<SPAN
class="case29">900</SPAN>
</FONT></P>
<P><FONT face="Times New Roman">Times New Roman
<SPAN
class="case11">normal</SPAN>
<SPAN
class="case12">bold</SPAN>
<SPAN
class="case13">lighter</SPAN>
<SPAN
class="case14">bolder</SPAN><BR>
<SPAN
class="case21">100</SPAN>
<SPAN
class="case22">200</SPAN>
<SPAN
class="case23">300</SPAN>
<SPAN
class="case24">400</SPAN>
<SPAN
class="case25">500</SPAN>
<SPAN
class="case26">600</SPAN>
<SPAN
class="case27">700</SPAN>
<SPAN
class="case28">800</SPAN>
<SPAN
class="case29">900</SPAN>
</FONT></P>