ホームページ作成の基礎からご提供するホームページ作成Space

以降で説明する、style や variant などを一度に指定します。height を指定する時は size とスラッシュ（ / ）で区切って指定します。size と family 以外は省略可能です。fonttype には、現在のアイコンラベルやウィンドウメニューに現在使用されているフォントを示す値として caption, icon, menu, message-box, small-caption, status-bar のいずれかを指定します。CSS2 では inherit（継承）も指定可能です。

BODY, TD, TH {
    font: italic bold 100%/150% serif;
}

normal（既定値：通常）, italic（イタリック）, oblique（斜め）のいずれかを指定します。CSS2 からは inherit（上位のスタイルを継承）が加わりました。

italic と oblique はどちらも斜体フォントになりますが、CSS1 の定義では、元々斜体のフォントを使用するか、通常フォントを無理矢理斜体にして使用するかの差違があります。IE3.0 や Netscape 4.0 では oblique をサポートしていません。IE4.0 は未確認ですが、IE5.0 では oblique もサポートしています。

<i style="font-style: normal"> とすると、<i> による斜体を打ち消すことができますが、IE3.0 では斜体のままになります。

H1, H2 { font-style: italic; }

normal（既定値：通常）, small-caps（大文字）のいずれかを指定します。CSS2 からは inherit（継承）も指定可能です。small-caps を指定すると、アルファベットの小文字が（すこし小さめの）大文字で表示されるようになります。

H1, H2 { font-variant: small-caps; }

フォントの太さを normal（既定値）, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかで指定します。IE4.0 や Netscape 4.0 では通常と太字の 2種類しかサポートしていないので、normal（通常）と bold（太字）以外を使用することは少なそうです。

DT { font-weight: bold; }

フォントの大きさを指定します。絶対指定として xx-small, x-small, small, medium（既定値）, large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。

周りのフォントに対する相対的な大きさを指定する時は 120% などのパーセント指定が無難です。small や smaller などや、em や ex などの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。

画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。詳細は「長さの単位 を参照してください。

BODY, TH, TD { font-size: 16pt; }

テキストの高さを 1.5em, 150% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。IE3.0 ではテーブルを使用したページで line-height を使用すると、ページのレイアウトが無茶苦茶に崩れてしまうというバグがあるようです。使用する場合は、IE3.0 を見捨てる覚悟で使用することになります。

BODY, TH, TD { line-height: 130%; }

フォントを指定します。カンマ（,）で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲みます。CSS1 では serif, sans-serif, cursive, fantasy, monospace が定義されています。CSS2 では inherit（継承）がサポートされています。

Windows だと、"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝" あたりが一般的です。Ｐ がつくのはプロポーショナルフォントです。Macintosh では "Osaka"、"細明朝体"、"平成角ゴシック" などのフォントがあります。→ フォントの例

Netscape 4.* では、<font face="..."> 同様、フォントの指定はうまくいかないことが多いようです。

BODY, TH, TD { font-family: 'ＭＳ ゴシック'; }

フォントの幅を normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit のいずれかで指定します。IE6.0、Netscape 7.0 ではまだサポートされていません。

BODY, TH, TD { font-stretch: condensed; }

フォントの高さと幅の比率（フォントサイズを文字 x の高さで割った値）を、none（指定しない）、0.46 のような数値、inherit（継承）のいずれかで指定します。IE6.0 や Netscape 7.0 ではまだサポートされていません。

H1 { font-size-adjust: 0.46; }