CSSによるフォントの指定
最近のWebデザイン主流としては
・文章：HTML
・修飾：CSS
・動き：JavaScript(jQuery)
というようになっています。
基本的にCSSはブラウザによって解釈の仕方がことあるものの、最近ではどのブラウザでも基本的に同じような見た目を再現することが出来るようになっています。
ブラウザがきちんとCSSの規約に沿っているかはAcid2 Test( Acid2 Browser Test - The Web Standards Project)で調べることが出来るので、調べてみてください。一応、きちんとしたブラウザなら下のようなモノがきちんと表示されます。
これが互換モードを有効にしているIEだとこのように崩れます。
基本的にこのような崩れが起きないように、いろいろと工夫をしながらCSSを組んでいきます。
で、今回はフォント指定の話。
1)Windowsのアンチエイリアスに関する問題
フォントは基本的にブラウジング環境にインストールされてるフォントでデフォルトになっているモノを使用するため、デザインのためにフォントを指定する必要がある場合にはCSSでフォントを指定してやります。
たとえば、Sony(Sony Japan | ソニーグループ ポータルサイト)の公式サイトでは次のような指定をしています。
*{
font-family:"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka;
}
(http://www.sony.co.jp/top/2009mb/common/css/common.cssより一部抜粋)
このようにフォントはセレクタを*(全要素)にして、プロパティにfont-familyを使用して設定します。値にセットされているフォントを先頭から順次読み出し、環境に存在する場合はそれを使用し、存在しない場合は次の値を取りに行くようになっています。値にセットされているフォントが存在しない場合は、CSSでフォントを指定していない場合と同じで環境のデフォルトフォントを自動的に使用します。
たとえば、上のCSSをヒラギノ角ゴ Pro W3がインストールされている環境で実行すると次のようなプロセスでフォントの指定が行われます。
このように値に設定してあるフォントから自動的にフォントが選択されるため、これを利用してOSごとにフォントの設定を行うことが出来ます。たとえば、OS(A)でフォントを指定したい場合、OS(A)以外で使用されていないフォントαを指定してやればOS(A)では自動的にフォントαが使用されることになります。このようにOSとフォントを1対1で対応させることによりOSごとにフォントを指定させることが出来ます。
上に出したSonyの例では
| フォント名 | OS |
|---|---|
| ＭＳ Ｐゴシック | Windows |
| Hiragino Kaku Gothic Pro | MacOSX |
| ヒラギノ角ゴ Pro W3 | MacOSX |
| Osaka | MacOS9以前 |
というようになっています。
普通ならコレでOKなのですが、デザイナーの方などはWindowsにヒラギノ角ゴ Pro W3をインストールしてある場合など、普通の環境では起こりえないことがおこり1対1の対応が崩れることがあります。
これによってちょっとした問題が発生する場合があります。
例として次のようなCSSを考えてみます。
font-family:"hiragino kaku gothic pro",meiryo,"ms pgothic"
ここで問題になるのがWindowsのアンチエイリアスの欠点です。Windowsでは標準でインストールされているフォント以外ではうまくアンチエイリアスがうまく行われず表示が汚くなる(一部文字がつぶれてしまう)という欠点があります。それにもかかわらず、ヒラギノ角ゴが先頭に来てしまっているため、それが適用されてしまいます。
その反面、MacOSなどWindows以外のOSの場合だと標準/非標準にかかわらずきれいにアンチエイリアスが適用されるので、それほど気を遣わなくても大丈夫です。
このような問題を防ぐためには、font-familyの値には、Windowsの標準フォントを先に持ってきて、それ以外を後ろに持ってくるという対策が考えられます。
上の例を使うとすると
font-family:meiryo,"ms pgothic","hiragino kaku gothic pro"
という感じです。
CSSのフォント指定の問題の1つはこれで片付きます。
2)Lucida Grandeに関する問題
もう1つの問題の方がどちらかというと深刻な問題です。
アンチエイリアスに関係する部分は表示が汚くなりますが、表示自体は正常に行われますが、こちらの問題は文字化けを伴います。
font-family:'lucida grande',tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic"
(http://static.ak.fbcdn.net/rsrc.php/v2/yX/r/J5-lcVgXv0s.cssより一部抜粋)
font-familyの先頭の値としてLucida Grandeが指定されていますが、このLucida Grandeがくせ者です。もともと英字フォントなのですが日本語環境だと全角数字を無理やり表示しようとして化けてしまう場合があります。私の所有している環境では再現することは出来ませんでしたが、環境によっては化けてしまうようです。
参考：日本向けのサイトでフォントにLucida Grandeを最初に指定してはいけない - ayu118の日々雑感。
日本語環境では指定する必要はないので、指定しないようにすべきフォントだと思います。
長々と書きましたが、今回メインPCにヒラギノやらモリサワやらを突っ込んでいろいろと気づいた＆思い出したのでまとめとして書いてみました。
