| IE3 | IE4 | NC4 |
|---|---|---|
  |
  |
  |
フォントファミリはデザインは共通でも書体（italic, bold等）の異なるフォントの集合体で、5つの一般フォントファミリに分類されています。それぞれの一般フォントファミリに特定のフォントファミリを指定できるUAもあるようです。
| 一般フォントファミリ名 | フォントファミリ名 | 表示テスト |
|---|---|---|
| serif | e.g. Times, Times New Roman, 平成明朝 （髭飾り) | 日本語 Test |
| sans-serif | e.g. Helvetica, Arial, ＭＳ Ｐゴシック （飾りなし) | 日本語 Test |
| cursive | e.g. Comic Sans MS, Snell Roundhand （筆記体風) | 日本語 Test |
| fantasy | e.g. Cottonwood, Studz, ＤＦＰPOP体 （装飾文字) | 日本語 Test |
| monospace | e.g. Courier, Courier New, Osaka−等幅 （等幅) | 日本語 Test |
Initia: UA specificというのは、初期値がWWWブラウザを含めたUser Agent次第ということです。フォントファミリ以外の指定をすればそれらも考慮され、前に書いたものから優先的に条件をクリアしたフォントが利用されます。例外的に","で区切る点に注意して下さい。空白類文字を含むフォントファミリ名は引用符で括った方が良いのですが、一般フォントファミリ名はキーワードなので括ってはいけません。
WinIE4以降は日本語に欧文フォント（サンプル）を指定しても可能な部分だけそのフォントで表示し、MacIE4以降（HTMLのlang属性を指定すれば可）やWinNC4（ダイナミックフォントを使うか、UTF-8で符号化すれば可）は日本語ページの欧文フォント指定を無視するので気付きにくいですが、環境によっては全角部分が文字化けします。Generic font familyを全角文字に使うのもしばらくは避けて下さい。それと、日本語のフォントファミリ名は要注意です。
キーワードを引用符で括っても認識してしまうブラウザもありますが、引用符で括ってもよいのはCSSの制御下にない文字列（URI, フォントファミリ名）のみです。キーワードを引用符で括った場合、仕様上は不正な値として無視されます。
CSS2: 英語と日本語の混在するような文章に関しても記述がある。次のような指定をすれば、英語は専用のフォント、日本語は明朝体を利用させることが出来る。日本語フォントにはラテン文字も含まれているので、指定の順番が重要。CSS1では、フォントに要素内のある文字が含まれていなければ次の候補、次の候補がない場合はUA標準という処理（CSS1でも、参考情報として同様の記述がある）。
normal, italic, obliqueの3種類があります。IE3はnormal不可。obliqueはIE4以降, Netscape6でサポート。obliqueはオブリーク体（フォントファミリの通常体を傾けた書体）が存在しなければ通常体を傾けるだけでも良く、italicはイタリック体が存在しなければオブリーク体で代用可とされています。obliqueはitalicと同じに扱われることが多いようです。
normal, small-capsの2種類が指定可能です。small-capsにすると、MacIE5やNetscape6では小文字が特徴の異なる小さな大文字で表示されます。それでも良いことにはなっているのですが、MacIE5, WinIE6以外のIEは大文字になるだけです。
通常とみなされている濃さに400（normal）を割り当てます。bold(=700), bolder, lighter, 100, 200, ... 900のように指定することもできますが、実際に使えるのは少ない（フォントによって異なる）です。bolder, lighterは親要素からの継承値よりも一段階濃く、薄くする指定です。
フォントはComic Sans MSで、左が親要素normal、右は親要素boldです。NC4はISO-8859-1で符号化しました。
| IE3 | IE4 | NC4 |
|---|---|---|
|
|
|
初期値はmediumです。キーワード（CSS1では1.5倍、CSS2では大きすぎたという理由で1.2倍間隔が推奨されている）, 親要素からの継承値に対する相対的な指定, 長さと指定の方法は色々あります。負の値は不正です。
IE3は解釈が滅茶苦茶で、em, exを使うと対応していないので読めなくなります。%の処理もいい加減で、見出しに指定するとデフォルトのサイズを基準に計算してしまいます。
NC4は、pt, cmなどで絶対的なサイズを指定しても、「フォントを大きくする」「フォントを小さくする」でサイズが変わるのですが、pxだけは変わりません。line-heightも同時に指定する時は、pxと他の単位の組み合わせは避けて下さい。NC4も相対的な指定に関しては信頼性が高くありません。
※Mac OS 8/9の日本語フォントOsakaなら、 ビットマップデータの用意されている9, 10, 12, 14, 18（px）の方が、アウトラインデータから描画される他のサイズより、小さいサイズでは奇麗に見えるといったように、フォントサイズの指定はかなり難しいです。長文のフォントサイズは、「読者に任せる」ことをお勧めします。MacIE5は和文フォントの場合は自動的に品質の良いサイズに丸めるので、デフォルトのフォントサイズは16pxなのですが、実際には14pxが使用されます。[ 詳細 ]
| xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|
| Win IE4/5 | 7.5pt | 10pt | 12pt | 13.5pt | 18pt | 24pt | 36pt |
| Win NC4 | 6pt | 8pt | 10pt | 12pt | 18pt | 27pt | 40pt |
| Win N6 | 8.5px | 10px | 13px | 16px | 18px | 24px | 32px |
| Mac IE4 | 9pt | 10pt | 12pt | 14pt | 18pt | 24pt | 36pt |
| Mac NC4 | 6pt | 8pt | 10pt | 12pt | 18pt | 27pt | 40pt |
[ デバイス解像度が72dpiなら、MacNC4のxx-smallは6ドットですので、判読は困難です。 MacIE5, WinIE6は、互換モードではCSS1、仕様準拠モードではCSS2の倍率を前提にしているようです。参考 ]
| xx-small | x-small | small | medium | large | x-large | xx-large |
|---|---|---|---|---|---|---|
| テスト serif sans-serif monospace | テスト serif sans-serif | テスト | テスト | テスト | テスト | テスト |
親要素のフォントサイズがsmallなら、largerを指定するとフォントサイズはmediumになります。親要素が長さで指定されている場合、UAの処理に依存します。
最後の例では、相対的な指定をする場合に共通することですが、計算後の値を継承します。95%を引き継いでどんどん小さくなっていくのではなく、DIVでサイズは親要素の95%に確定し、その値が引き継がれるので同じ大きさになります。
フォントに関する指定を一括して行えます。font-size, font-family以外は省略可能で、省略した属性は初期値にリセットされます。
以下の式で、[]はグループ化です。||は、そのうち少なくとも1つが任意の順番で現れなければならないこと、?は0回もしくは1回の出現を現します。それ以外は、文字通りに出現しなければならなりません。つまり、<'font-style'>, <'font-variant'>, <'font-weight'>の中から順不同で少なくとも一つは出現しなければならないのですが、グループ自体オプションなので省略可能です。<'font-style'>というのは、font-style属性に指定可能な値という意味です。
NC4はline-heightを、IE3, MacIE4以降は全くリセットしません。また、IEは不正な値の扱いが不正なので注意して下さい。
これらの属性は継承するので、デフォルトのスタイルをBODYに設定しても良いのですが、特定のUAでは文書の体裁が失われます。