太さ (Font styling)

 
フォント
ホーム > CSS2 Note > 太さ
C1- ie3- N4-

説明

font-weight: weight; C1- ie3- N4-
値:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
初期値:normal適用要素:すべて継承:する%値:なしメディア:ビジュアル
このプロパティは、フォントの太さを指定します。

子供要素は算出値を継承します。
 

使用例

dt {font-weight:bold}
 

太さ <'font-weight'>

100-900 C1- ie3- N4- フォントファミリの中の、どの太さのフォントを使用するかを100単位で指定します。標準の太さを「400」として、値が小さければより細いフォント、値が大きければより太いフォントが選択されます。
normal C1- ie3- N4- 「400」と同じ。標準の太さを指定します。初期値。
bold C1- ie3- N4- 「700」と同じ。太字を指定します。
bolder C1- ie3- N4- 現在のフォントより一段太いフォントを指定します。該当するウェイトが存在しなければ、単に数値を1段階大きくします。
lighter C1- ie3- N4- 現在のフォントより一段細いフォントを指定します。該当するウェイトが存在しなければ、単に数値を1段階小さくします。

太さのレンダリング

<style type="text/css"><!--
span {font-family:Arial,sans-serif;}

.eg1 {font-weight:100;}
.eg2 {font-weight:200;}
.eg3 {font-weight:300;}
.eg4 {font-weight:400;}
.eg5 {font-weight:500;}
.eg6 {font-weight:600;}
.eg7 {font-weight:700;}
.eg8 {font-weight:800;}
.eg9 {font-weight:900;}

.eg10 {font-weight:normal;}
.eg11 {font-weight:bold;}
.eg12 {font-weight:bolder;}
.eg13 {font-weight:lighter;}
--></style>

<span class="eg1">font-weight:100;</span>&nbsp;&nbsp;&nbsp;
<span class="eg2">font-weight:200;</span>&nbsp;&nbsp;&nbsp;
<span class="eg3">font-weight:300;</span>&nbsp;&nbsp;&nbsp;
<span class="eg4">font-weight:400;</span>&nbsp;&nbsp;&nbsp;
<span class="eg5">font-weight:500;</span>&nbsp;&nbsp;&nbsp;
<span class="eg6">font-weight:600;</span>&nbsp;&nbsp;&nbsp;
<span class="eg7">font-weight:700;</span>&nbsp;&nbsp;&nbsp;
<span class="eg8">font-weight:800;</span>&nbsp;&nbsp;&nbsp;
<span class="eg9">font-weight:900;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg10">font-weight:normal;</span>&nbsp;&nbsp;&nbsp;
<span class="eg11">font-weight:bold;</span>&nbsp;&nbsp;&nbsp;
<span class="eg12">font-weight:bolder;</span>&nbsp;&nbsp;&nbsp;
<span class="eg13">font-weight:lighter;</span>&nbsp;&nbsp;&nbsp;
 
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新