Webにおけるフォントと2004JISなどの諸問題について考えてみた(2010春)。遠近法ノート読者になる遠近法ノート本好きのデザイナー、西岡裕二の日記帳なのです。デザインと読書について書くはず。IndexWorksInfoFontTwitter2010-03-20Webにおけるフォントと2004JISなどの諸問題について考えてみた(2010春)。細かい話をすると膨大になる(というか自分の手に余る)ので、簡潔に書きます。今後のWeb制作の参考になればと。結論:font-familyで和文フォント名を指定するのは、もうやめる。そのかわりに、font:menu;と書けば、OSのシステムフォント(menu以外にも、icon、message-box、caption、status-barがある)を指定できる。X(10.5以降)のヒラギノは2系統あることに注意。●ブラウザで見るフォントは今でも2004JIS(の字形)になっていない。?●各サイトのCSSでヒラギノPro(ProNではなく)を指定している。●ブラウザのデフォルトにヒラギノPro(ProNではなく)が選択されている場合がある。●とあるテキストエディタのデフォルトもヒラギノProだったりorz●ProNを指定するべきだが、そもそもの問題点を理解できる人が極少数。2004JISの字形問題ではMicroSoftが啓蒙活動を行ったが、Appleはスルーした。Pゴシックも入るので、CSSの指定によっては、そちらが優先表示される可能性がある。●数字と欧文は、無指定ならば「Helvetica+ヒラギノ角ゴ」(ブラウザによって違うかも)だが、ヒラギノを指定すると「ヒラギノの従属欧文」が使われてしまう。●font-familyでOsakaを指定しているサイトが少なからず存在する*1が、Osakaフォントはすでに過去の遺物*2であり、出来ればもう見たくない。●Appleつながりで。iPhoneにはヒラギノProNのほうしか搭載していないはず。解決法:CSSでOsaka指定はやめる。ヒラギノ指定もやめる。Macなら標準でヒラギノが表示されるのだから、そもそも指定する必要なし。念のため、テキストエディタの編集フォントも確認する。ブラウザのデフォルトをヒラギノProNに。Windowsの諸問題。Pゴシックだったりする。●Windows7+IE8では、明らかに日本語のサイトなのに中文フォント(繁体字)で表示される場合が少なからずある(単なるバグなのか言語指定の問題なのか多言語環境の潜在的問題なのか)。例:とあるタイポグラフィの話題を扱うブログですらこの有様。●そろそろメイリオ(Meiryo)を使いたいよね。アンチエイリアス表示にも慣れたでしょう?●そのままメイリオに変更するとレイアウトが崩れる。IEでfont-size:100%;では文字がかなり小さく見える。IEとFirefoxで「100%」のサイズが違うらしく、%指定は無理があるようだ(←このあたり検証不足)。px指定はしたくないのだが......。●IEでは、ブラウザのデフォルトフォントをメイリオにすると、下線が打ち消し線みたいに見えてしまう場合がある*3。Pゴシックからメイリオに切り替える場合は、font-size調整は必要。AA再現はAA記法使えばよろし*4。指定フォント名がいいかげん。Serviceはフォント名までは解析してくれない。話、とあるそこそこ著名なブログのCSSでは、このように指定されていた。PGothic',sans-serif;単なるタイプミスと侮ってはいけない。ためしに「Mayryo」でググってみると、ほんとにそういう名前のフォントがあるんじゃないかと思うくらいヒットする(どうやらmeirio.ttfというフォントはあるらしいよ......)。Pゴシック'なども間違えやすいところ(全角でなければならない)。Pro'ではなく'HiraKakuPro-W3'と書いたほうがよかった(理由は忘れた)。●ちなみに、IEのフォント名解釈は、良くいえば柔軟、悪くいえばいいかげんで、多少間違っていても似た名前のフォントを表示してしまう。●Webの閲覧環境は変化する。これまでは「指定順を考慮しつつ総当たり指定」でなんとか解決できたが、総当たり指定も環境の変化に応じてアップデートしなければならない。●Webで集められる情報は古いままのものが残っている。間違った情報もかなりある(無論、この文書もいずれ例外ではない。後から読む人は、これが2010年の見解であることに留意すること)。全部まとめて解決しちゃえ。●font-familyで和文フォント名を指定するのは、もうやめる。それでもメイリオを指定したいときは。font:menu;と書けば、OSのシステムフォントを指定できる。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:これははてなの話ね。Grande+ヒラギノ角ゴProN。AquaKanaはなぜか使われないみたいだけど別にいいや。*6:とは言え、これは日本国内向け。OSが他の言語の場合はどうすれば......。lang="ja"を指定しないといけないのだろうか。00:00Tweet広告を非表示にする関連記事2013-03-26一部のフォントでノノカギの困るバグ。バグがどうこうという話はあまり書かないことにしたいのだけど......2012-05-01欧文OTFのプロポーショナル数字。この時期にアレ...2005-07-29メモメモ。http://h...2004-11-28そんでもって、なんかまた書体話になってしまうわけですが(汗)。いや、いま読むひまないから......。