Step forward CSS - Section 1

Section 1 : 文字の装飾

　font-size 属性で文字の大きさを変えたり，font-family 属性でフォントの種類を変えたりすることは First step CSS で紹介したが，ここでは文字を装飾する属性を見ていこう。

フォントのスタイル：font-style 属性

　HTML でも太字・斜体などを指定できるが，この font-style 属性ではフォントのスタイルを指定する。この属性は，すべての要素について適用される。

font-style: （キーワード）;

　指定できるキーワードは次の 3 つである。

normal: 通常の書体（正体）。既定値。
oblique: 斜体。
italic: イタリック体。

　本来“斜体”と“イタリック体”は異なるものであるが，システムによっては，同一とされる場合も多い。

<P STYLE="font-style: oblique">段落全体を“斜体”にして，<EM STYLE="font-style: normal; color: red;">強調は正体で赤</EM>にしました。</P>

IE4/5 キーワード oblique と italic はつねに同一になる。

IE3, NN4 oblique はサポートされていない。

文字の太さ：font-weight 属性

　先ほどの font-style 属性に対して，これは文字の太さを指定する。全要素に適用される。

font-weight:（キーワード）;

　このキーワードは font-style に比べて複雑である。

normal: 通常の太さ。既定値。
bold: 太字。
100，200，300，...，900: 9 段階の太さを 100 きざみの数値で指定する。キーワード normal は 400 に，bold は 700 に同じ。ブラウザにおいて同じ font-family で太さが 9 種類に満たない場合，このうちのいくつかは同じ太さで表示される。
bolder: より太く。このとき，数値で表したものがつねに 100 増えるわけではない。
lighter: より細く。このとき，数値で表したものがつねに 100 減るわけではない。

　この数値指定の場合と bolder，lighter による指定はたいへんに複雑なのでここでは簡単な説明にとどめる。

<P STYLE="font-family: Times, serif; font-weight: normal;">Normal weight. <SPAN STYLE="font-weight: bold;">Bold face.</SPAN> <SPAN STYLE="font-weight: 900;">Font-weight is 900: extra bold.</SPAN> <SPAN STYLE="font-weight: 200;">Font-weight is 200: relatively light.</SPAN></P>

IE3 キーワードの体系が規格と異なる。

変体フォント：font-variant-属性

　和文ではお目にかからないが，欧文では見出しなどで小さな大文字：スモールキャピタル体が用いられることがある。これは高さが 1ex の大文字の書体である。これを指定するのが font-variant 属性である。

font-variant: （キーワード）;

　キーワードは既定値である normal，スモールキャピタルを指定する small-caps のいずれかである。small-caps が指定された場合，小文字がスモールキャピタルとして表示される。閲覧環境にスモールキャピタルがない場合，正体の大文字を縮小したり，単に大文字としたりする場合がある。

<DIV STYLE="font-family: Times, serif;">
<H2 STYLE="font-variant: small-caps;">Small Capital</H2>
<P>Small capital is used for headings such as above, <EM STYLE="font-variant: small-caps;">emphasize</EM>, and so on.</P>
</DIV>