Section 12 : フォントマッチング(1)

 フォントは,とくに読者の環境によるところが多い部分である。CSS でのフォントに関わる指定がはたしてさまざまな環境で有効になるのかというのはたいへんに難しい問題であり,最悪の場合,文字が化けるという致命的な結果を招きかねない。

フォントマッチング

 font-family 属性を用いて,フォント名や一般的なフォント名を指定して文書内のフォントを変えることができた。このとき,代替候補をあげたり,最後に一般的なフォント名をしたりするべきだというのは理解していただけているだろう。それだけフォントの指定は慎重に行う必要がある。ワープロのように,システムが持っているフォントの中から 1 つを選んでそれでよし,というものではない。

 前にも述べたように,フォントの分類というのは難しい。また,フォントの“近さ”の評価も同じである。だが,それなりの処理はなされなくてはならないので,CSS では次の手順でフォントの対応を行う。

  1. まず,ブラウザは認識しているフォントのデータベースを作成する。このデータベースは,フォント名だけでなく,関係する CSS 属性(このフォントは small-caps 用,italic 用なども)も含んでいる。もし,まったく同じ性質のフォントが複数あるときは 1 つを除いて認識されない。
  2. 注目している要素の個々の文字について適用できるフォント関連属性を調べる。それから,font-family 属性をもとにどのフォント名のフォントにするかとりあえず選んでみる。それからのこりのフォント関連属性をそのフォントに適用できるか調べてみる。もしすべて大丈夫だったらそのフォントに決定する。
  3. font-family 属性で指定されたフォント名と一致するフォントがデータベースにない場合は,次の font-family 属性に示された候補で 2. の処理を行う。
  4. 2. でフォントが決まったものの,文字が存在しない場合,次の font-family の候補に対して 2. の処理を行う。
  5. どうしてもだめな場合には,ブラウザの既定値のフォントに対して 2. を実行する。

 2. の「残りの属性について調べる」というのは次の手順である。

  1. まず,font-style。italic は italic 用,または oblique 用,のフォントが存在すれば OK とする。両方あれば,italic 用が優先。oblique は oblique 用のフォントと一致させる。ないときは失敗とみなす。
  2. font-variant は nomal ならば small-caps 用以外のフォントを選ぶ。small-caps なら,まず small-caps 用があるか調べ,なければ大文字フォントを縮めるなどの対応を試みる。それがだめならとりあえず大文字にしておく。
  3. font-weight については複雑なので後述。
  4. 最後に font-size。大きさが可変なものはピクセル単位に丸める。ビットマップフォントは多少大きさが異なってしまうこともある。

このような手順でフォントマッチングが行われる。

 とはいうものの,これはおもに欧文についての話なので,和文だと多少事情が異なる場合があることを注意していただきたい。たとえば,

font-family: Times, serif;

として漢字を使ったとする。文字コードの認識がうまく行われていれば,Times に漢字は存在しないので一般的なフォント名 serif に関連づけられたフォントから漢字が表示される。ところが,ブラウザが文字コードをうまく認識できなかった場合,Times から漢字のコードに相当する文字が使われ,これが文字化けになってしまう。最悪の場合,serif も漢字を持っておらず,既定値のフォントが欧文ならば壊滅的様相になる。たとえ日本語版でも,Internet Explorer 3.0/4.0 にはこのような処理が起こりうるので注意しなくてはならない。和文(2 バイト文字)が出現しうる箇所には,現実問題として,日本語フォントの指定を環境に依存しない形で,かつ手厚く行っておく必要があろう。

 CSS の規格では,

font-style: Helvetica, Arial, "MS Pゴシック", Osaka, "MS ゴシック", Gothic, sans-serif;

とすれば欧文部分が Helvetica または Arial で,和文部分が MS Pゴシック,Osaka,MS ゴシック,Gothic のいずれかで表示される(ない場合は sans-serif)ことになるが,ブラウザがそれを許しておらず,和文まで Helvetica あるいは Arial で表示させようとして文字化けを引き起こしてしまうことがあるのは残念である。現状を考えると,和文を含む場合は先頭に和文フォントを持ってくるのがよいようである。この場合,和文フォントも欧文文字(半角文字)を持っているはずだから,すべてその和文フォントで表示されることになる。

 先にも“環境に依存しない形で”で述べたのは,ワープロ気分でたとえば Windows にしかない,あるいは Mac にしかないフォントだけを書いておく CSS をよく見かけるからである。

font-family: Chicago;

 これは CSS としては間違いではないが,Chicago がない環境が考慮されていない。Chicago がなければブラウザの規定のフォントになるが,それであなたのデザインは多くの人に伝わったことになるだろうか。

font-family: Chicago, Verdana;

 これは先ほどよりまだよい。Macintosh の Chicago に対応するのは Windows では Verdana かな,と考えているようだが,世の中 Macintosh と Windows しかないというのではないし,Macintosh または Windows であってもこれらがない場合もあるだろう。

font-family: Chicago, Verdana, Arial, sans-serif;

 少なくともこれくらいは指定してほしいものである。とくに,最後の“一般的なフォント名”は最後の妥協点だと割り切って,必ず指定することをおすすめする。

 今扱っている CSS1 では“フォントがない”場合の対応はあるいは“融通が利かない”ように見えるが,CSS2 ではこのフォントに関してはかなりの拡張がなされている。