Since: 23rd/May/2002; Last Modified: 24th/Dec./2006
font-weight全ての要素の文字を通常 (normal)にして、最初の p 要素と address 要素だけを太字 (bold) にみましょう。
@charset "utf-8";
* { font-style: normal;
font-weight: normal }
html { background: url(./rindou5.gif) navy;
color: #ccf }
h1 { font-style: italic }
div.section { background : #ccf;
color: navy }
p:first-child { font-weight: bold }
p:first-child:first-letter { color: red }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold }
common.css を上のように編集／保存して、 genji01_kiritsubo.html をブラウザで開くと、最初の p 要素と address 要素が太字、 h1 要素は通常の太さで表現されていることが確認できます。
normal/bold | 通常／太字 |
bolder/lighter | そこで指定されているものよりも太く／より細く |
100 から 100 ごとに 900 まで | 400 が normal と同じ。 700 が bold と同じ |
inherit | 親要素の指定を継承 |
次の例は、 h1, h2, h3 要素の文字の太さを指定しています：
h1 { font-family: 900 }
h2 { font-family: 800 }
h3 { font-family: 700 } /* 700 は bold と同じ */
定義では 700 が bold と同じになり、 800, 900 は bold よりも太くなるはずなのですが、現状のほとんどのブラウザは、600, 700, 800, 900 は bold と同じにな表示します。また、 500 以下は normal と同じになります。私は bold と normal 以外は使っていません。