Font Weight
フォントの太さを指定します。HTMLの<B>タグに相当します。
値は、絶対キーワードと相対キーワード、数値で指定できます。
●関連プロパティ
{ font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 }
絶対キーワードで指定
絶対キーワードは、「bold」で太くないます。ArialはBoldがありますが、Arial Blackの場合はありませんから、 指定した場合ブラウザで生成しますから、不自然な太さになります。
{ font-weight : normal | bold }
font-weight: normal; font-family: Arial;
Font weight normal
font-weight: bold; font-family: Arial;
Font weight bold
font-weight: normal; font-family: Arial Black;
Font weight normal
font-weight: bold; font-family: Arial Black;
Font weight bold
相対キーワードで指定
相対キーワードは、「bolder」で親要素の太さより太く。 「lighter」で細くなるはずですが、サンプルのように「lighter」は効果がありません。
太いフォントを細くブラウザで生成することはできないようです。各太さのフォントがある場合、可能のようですがWindows標準フォントにはLightのフォントがありません。
「bolder」は、2回まで効果が出ます。それ以上は、効果がありません。
{ font-weight : bolder | lighter }
<p style="font-family: Arial; font-weight: normal;">
Font weight <span style="font-weight: bolder;">Bolder.<span style="font-weight:
bolder;">Bolder.<span style="font-weight: bolder;">Bolder.</span></span></span></p>
Font weight Bolder. Bolder. Bolder.
<p style="font-family: Arial Black; font-weight: normal;">Font weight <span style="font-weight: lighter;">lighter.<span style="font-weight: lighter;">lighter.<span style="font-weight: lighter;"></span></span></span>
Font weight lighter. lighter.
数値で指定
数値は、100から900までの9段階で指定できますが、表示はサンプルのようになります。 100から500までは変化がありません。600は太さは700と同じようですが、表示が異なります。 700と800は「bold」のように見えます。900は、700に「bolder」を指定したように見えます。
{ font-weight : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 }
font-weight: 100;
Font weight 100
font-weight: 200;
Font weight 200
font-weight: 300;
Font weight 300
font-weight: 400;
Font weight 400
font-weight: 500;
Font weight 500
font-weight: 600;
Font weight 600
font-weight: 700;
Font weight 700
font-weight: 800;
Font weight 800
font-weight: 900;
Font weight 900
 |
 |
|---|
