Web標準普及プロジェクト

フォント名の指定は一般名と併用するべきです

固有のフォント名だけを指定しないでください

フォント名を指定する場合に(特にオーサリングソフトを使われている場合だと思われますが)、 次のようなフォント指定を行っているサイトがあるようです。

font-family: "任意のフォント名";

この「任意のフォント名に特殊なベンダー特有フォントを指定していることもありますし、 「MS ゴシック」を指定している場合もありますが、これらはあくまでも特定の環境に依存した指定です (MS ゴシックはWindowsには標準でインストールされているフォントですが、他のOSにはありません)。 WWWはサイト作者とは異なる環境の人も見ることになるわけですから、これは意図通りの表示が行われないことを意味します。

フォントの一般名も併記してください

フォントはその種類ごとに一般名がCSSの仕様で定義されています。 フォント名を指定する場合は次のように一般名も併記するべきです。 そうすれば、指定のフォントが無い場合にもそれに近いフォントで表示されることになります。

font-family: "ゴシック体のフォント名" , sans-serif;

このように併記すると、ブラウザは前に書かれているフォント名から順にパソコンにインストールされているフォントを探していきます。 そして一致するフォントが最後まで見つからない場合、最後に指定されている一般名にしたがい、 それに設定されているフォントを使用してレンダリングを行います。

つまり上記の指定では、 「ゴシック体のフォント名」がインストールされていない環境でもsans-serifに指定されているゴシックフォントが代わりに用いられ、 作者の意図に近い表示になります。

フォントの一般名

フォントの一般名は次のものがあります。

serif
明朝体のような「ひげ付きフォント」を意味します
sans-serif
ゴシック体のような「ひげ無しフォント」を意味します
cursive
手書きのようなフォントを意味します
fantasy
装飾に使えるようなフォントを意味します
monospace
等幅のフォントを意味します

以下のサンプルを見てください。おそらく、こんなフォント名は存在していないという前提のサンプルですが、 フォントが変更されて見えているかと思います(筆者の環境では日本語の場合、装飾がデフォルト設定ではうまく機能していませんでした)。

<span style="font-family: '存在しないゴシックフォント' , sans-serif;">ゴシック(sans-serif)</span><br>
<span style="font-family: '存在しない明朝フォント'     , serif;">明朝(serif)</span><br>
<span style="font-family: '存在しないCursiveフォント'  , cursive;">手書き風(cursive)</span><br>
<span style="font-family: '存在しないfantasyフォント'  , fantasy;">装飾文字(fantasy)</span><br>
<span style="font-family: '存在しない等幅フォント'     , monospace;">モノスペース(monospace)</span><br>

ゴシック(sans-serif)
明朝(serif)
手書き風(cursive)
装飾文字(fantasy)
モノスペース(monospace)

また余談ですが、Mozillaはデフォルトのフォント設定のままだと日本語のWebサイトもserif(つまり明朝体)で表示します。 全てのブラウザでゴシック体のフォントが標準というわけではないのです。

補足: Windows版Internet Explorer5.5問題

メールで頂いた情報をここで紹介しておきます。

マイクロソフト サポート技術情報 - 417057によると、 Windows版のIE5.5及び、5.5SP1ではsans-serifを指定した場合に文字化けを起こすようです。 原因は日本語を含んでいないフォントをIEが使用してしまうためのようです。