まず,CSS での適用を前提として,フォントについて簡単に説明しておこう(CSS に関する基本的な知識を前提とする)。
ここでのフォントは,同じ特徴(デザイン)の文字のひとそろい程度の理解でよいだろう。
CSS において,フォントは,いくつかのプロパティを通じて指定される。CSS において,特に重要なのはフォントファミリである。フォントファミリは,似たデザインのフォントの集合である。たとえば,多くのシステムにインストールされているであろう Arial というフォントファミリに,正体(ノーマル),ボールド体,イタリック体,ボールドイタリック体があることはご存じであろう。フォントファミリとしては,欧文では“Times”“Helvetica”“Courier”,和文では“MS ゴシック”“Osaka”“ヒラギノ角ゴ”などがある。それぞれ,このように,ひとつのフォントファミリとしてくくられるフォントの性質としては,CSS2 においては,
がある。フォントファミリによっては,その中に数十ものフォントが属していることもある。たとえば以下に示すのは,Neue Helvetica に属するフォントの一部である。
こういったフォントの性質による整理は,システムによってやり方が異なる場合がある。たとえば,Mac OS X の“ヒラギノ明朝 Pro”にはウェイト違いの“W3”と“W6”がインストールされている。OS からは“ヒラギノ明朝 Pro”ファミリに属するフォントとみなされるが,Mac OS 版 Internet Explorer 5 は,これらウェイト違いのフォントを異なるフォントファミリとみなす。
CSS1 では,フォントは閲覧側のシステムにインストールされているものを使うことになっている。CSS2 では,それが大きく拡張され,ウェブからのダウンロードもできるようになっているが,(2003 年 2 月)現在,この機構の利用できる環境がじゅうぶん整っているとはいい難い。ここでは,閲覧者側のシステムにあるフォントを使用することを想定して進めよう。
フォントファミリを指定するのは,font-family
プロパティである。
font-family:
フォントファミリ,
フォントファミリ,
...;
font-family
プロパティには,使用したいフォントファミリの名前を,カンマ区切りリストで与えていく。簡単に言うと,先に書いたものから使用が試みられ,使用できないときはその次,それでもだめならその次,……,そしてリスト中のすべてのフォントが使用できないときはブラウザの標準のフォントが使われることになっている。リスト中のフォントファミリ名が空白を含むときは,二重引用符「"
」または単一引用符「'
」でくくらなければならない。
前述のように,フォント環境はコンピュータシステムによりまちまちである。したがって,閲覧側のフォント環境を考慮して,システム中に希望のフォントが存在してない場合の代替候補として,リストに多くのフォントファミリをあげておくことがひとつの方法である。たとえば,
font-family: Frutiger, "Humnst777 BT", "Myriad Web", "Myriad Pro", Tahoma, Verdana, sans-serif;
のように指定することができよう。
ところで,CSS では,フォントを便宜的に分類するキーワードが用意されている(一般フォントファミリ)。これには,次のようなものがある。
serif
sans-serif
cursive
fantasy
monospace
このキーワードはシステムごとにフォントファミリに結び付けられており(Netscape 6(右図)などではそれぞれにキーワードをどのフォントに結び付けるかを設定可能である),font-family
プロパティのファミリ名のリストの最後にこれらから 1 つを選んで与えれば,(フォントを“これ”と特定することはできないものの)“指定したフォントがすべて存在しない・使用できないために標準のフォントが使われる”という事態を避けることができる。先ほどの例では,リストの最後に“sans-serif
”が指定されている。
フォントの指定の詳細は,本サイトの“Academic HTML 4.0”中の CSS チュートリアル(CSS1 準拠),“Let's begin CSS”をはじめとした CSS2 チュートリアルなどを参考にされたい。
本稿では,WWW での利用という特質を考慮して,次のような方針で書体見本を掲載している。印刷媒体では,異なる考慮が必要になるので注意されたい。