遠近法ノート

本好きのデザイナー、西岡裕二の日記帳なのです。デザインと読書について書くはず。

Webにおけるフォントと2004JISなどの諸問題について考えてみた(2010春)。

細かい話をすると膨大になる(というか自分の手に余る)ので、簡潔に書きます。
とりあえず今後のWeb制作の参考になればと。

結論:font-familyで和文フォント名を指定するのは、もうやめる。

そのかわりに、

font:menu;

と書けば、OSのシステムフォント(menu以外にも、icon、message-box、caption、status-barがある)を指定できる。

Mac OS Xの諸問題。

OS X(10.5以降)のヒラギノは2系統あることに注意。
●ブラウザで見るフォントは今でも2004JIS(の字形)になっていない。混在している。なぜか?
●各サイトのCSSヒラギノPro(ProNではなく)を指定している。
●ブラウザのデフォルトにヒラギノPro(ProNではなく)が選択されている場合がある。
●とあるテキストエディタのデフォルトもヒラギノProだったりorz
●ProNを指定するべきだが、そもそもの問題点を理解できる人が極少数。2004JISの字形問題ではMicroSoftが啓蒙活動を行ったが、Appleはスルーした。
MacMS officeをインストールしていると、メイリオMS Pゴシックも入るので、CSSの指定によっては、そちらが優先表示される可能性がある。
●数字と欧文は、無指定ならば「Helvetica+ヒラギノ角ゴ」(ブラウザによって違うかも)だが、ヒラギノを指定すると「ヒラギノの従属欧文」が使われてしまう。
●font-familyでOsakaを指定しているサイトが少なからず存在する*1が、Osakaフォントはすでに過去の遺物*2であり、出来ればもう見たくない。
Appleつながりで。iPhoneにはヒラギノProNのほうしか搭載していないはず。

とりあえずの解決法:CSSでOsaka指定はやめる。ヒラギノ指定もやめる。Macなら標準でヒラギノが表示されるのだから、そもそも指定する必要なし。
念のため、テキストエディタの編集フォントも確認する。
ブラウザのデフォルトをヒラギノProNに。

Windowsの諸問題。

●ブラウザのデフォルトフォントは今でもMS Pゴシックだったりする。
Windows7+IE8では、明らかに日本語のサイトなのに中文フォント(繁体字)で表示される場合が少なからずある(単なるバグなのか言語指定の問題なのか多言語環境の潜在的問題なのか)。
例:とあるタイポグラフィの話題を扱うブログですらこの有様。

●そろそろメイリオ(Meiryo)を使いたいよね。アンチエイリアス表示にも慣れたでしょう?
●そのままメイリオに変更するとレイアウトが崩れる。IEでfont-size:100%;では文字がかなり小さく見える。IEFirefoxで「100%」のサイズが違うらしく、%指定は無理があるようだ(←このあたり検証不足)。px指定はしたくないのだが……。
IEでは、ブラウザのデフォルトフォントをメイリオにすると、下線が打ち消し線みたいに見えてしまう場合がある*3

とりあえずの解決法:MS Pゴシックからメイリオに切り替える場合は、font-size調整は必要。AA再現はAA記法使えばよろし*4

指定フォント名がいいかげん。

CSS Validation Serviceはフォント名までは解析してくれない。
たとえばの話、とあるそこそこ著名なブログのCSSでは、このように指定されていた。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',
'メイリオ','Mayryo','MS Pゴシック','MS PGothic',sans-serif;

単なるタイプミスと侮ってはいけない。ためしに「Mayryo」でググってみると、ほんとにそういう名前のフォントがあるんじゃないかと思うくらいヒットする(どうやらmeirio.ttfというフォントはあるらしいよ……)。'MS Pゴシック'なども間違えやすいところ(全角でなければならない)。
●いまさらだけど、Safari向けに「ヒラギノ角ゴ Pro W3」を指定したいときは、'Hiragino Kaku Gothic Pro'ではなく'HiraKakuPro-W3'と書いたほうがよかった(理由は忘れた)。
●ちなみに、IEのフォント名解釈は、良くいえば柔軟、悪くいえばいいかげんで、多少間違っていても似た名前のフォントを表示してしまう。

その他の問題。

●Webの閲覧環境は変化する。これまでは「指定順を考慮しつつ総当たり指定」でなんとか解決できたが、総当たり指定も環境の変化に応じてアップデートしなければならない。
●Webで集められる情報は古いままのものが残っている。間違った情報もかなりある(無論、この文書もいずれ例外ではない。後から読む人は、これが2010年の見解であることに留意すること)。

全部まとめて解決しちゃえ。

●font-familyで和文フォント名を指定するのは、もうやめる。とにかく問題が多すぎる。

それでもメイリオを指定したいときは。

font:menu;

と書けば、OSのシステムフォントを指定できる。
つまり、システムフォントがヒラギノProならヒラギノPro、ヒラギノProNならヒラギノProN*5MS PゴシックならMS Pゴシックメイリオならメイリオが使われる。
ユーザの環境に合わせるため、問題は少ないと期待される*6。将来、OSやブラウザに仕様変更がなされても、しばらくは大丈夫だろう。Boldも反映されるっぽい。

つっこみ・検証待ちで。

当サイトのCSS自体へのつっこみはナシの方向で。
検証中のサイトはこちら:http://theme.g.hatena.ne.jp/n-yuji/

Web屋でもないのに、なんでこんな記事まとめてるんだろうね僕は……。

*1:ITproとかアマゾンとか。

*2:http://theme.g.hatena.ne.jp/n-yuji/20040731に書いた。

*3:追記FireFoxの場合はデフォルトフォントをメイリオにしておくのが吉と思う。

*4:これははてなの話ね。

*5:正確にはLucida Grande+ヒラギノ角ゴProN。AquaKanaはなぜか使われないみたいだけど別にいいや。

*6:とは言え、これは日本国内向け。OSが他の言語の場合はどうすれば……。やはりlang="ja"を指定しないといけないのだろうか。