フォントの覚書き

1.ブラウザが用意しているフォント

エンドユーザーの環境にどんなフォントがインストールされているのかは、Webページ作成者には分からない。

OS等に関係なく、CSSで指定できるフォントが存在する。

この5つは、W3CのCSS3で、定義されている。
しかし、この名前のフォントファミリーがエンドユーザーの環境にインストールされている訳ではない。

これら5つのフォントに対して、ブラウザ側で適切なフォントを選択して表示することが求められている。

2.serifとsans-serif

sans-serifとserifのフォント指定は、日本語フォントにも有効である。sans-serifはゴシック系フォント、serifは明朝系フォントに当たると考えてよさそうだ。

sans-serifはゴシック系の文字で、飾りのないフォント。

a あ

serifは明朝系で、文字に飾りがあるフォント。

a あ

3.フォントの指定方法

ブラウザはCSSで指定されたフォントがその環境内で使用できるかを、先頭から順番に調べていき、使用できれば、そのフォントを使用する。

CSSでフォントファミリーを指定する場合の記述例。

font-family:'ＭＳ 明朝',HiraMinProN-W3,serif;

この例は、Windows上では、一般にインストールされているであろう「ＭＳ明朝」を、「ＭＳ明朝」がインストールされていないMacOS上では、「ヒラギノ明朝」(HiraMinProN)を使って、表示されることを期待している。この2つのフォントファミリがインストールされていない場合に備えて、最後に「serif」を指定している。

最後のserifを指定しなければ、ブラウザが使用するフォントファミリーを決定する。
制作者の意図に沿った表示を、ユーザーのブラウザでも可能な限り再現したのであれば、フォントファミリー指定の最後に、W3C標準の5つのフォントのいずれかを、指定しておいた方がいいらしい。

4.ブラウザのデフォルトフォント

CSS等でフォントファミリーの指定が行われていない場合や、指定されていても全て使えないフォントファミリーだった場合、ブラウザはデフォルトのフォントを使用する。

私が知る範囲では、ブラウザのデフォルトフォントは、ゴシック系のフォントで、基本的にはsans-serifに割り当てられているフォントファミリーのようだ。

だが、ブラウザのデフォルトフォントはsans-serifとは限らない

IE8の「sans-serif」の解釈