フォントの指定

今私がメインで使用しているブラウザはIE6.0です。

それで、今日気づいたのですが、IE6ではCSSでのfont-familyで複数指定しても、最初にマッチしたフォントしか反映されないようです。
なので、私が良くやるように、英数フォントを一番先に指定すると、それ以下のフォント指定が無効になるようです。

このことを調べているときに、他のフォント指定関係で気になったことを上げていきます。

ウインドウズ IE 環境において、和文フォントの指定の前に、英文フォントを指定することでフォントセットを組み替えるってことが（vista メイリオデフォルト環境を除く）可能ですが、それをやった場合には 11px および 9px 該当サイズがその上のサイズと同じ状態になります。

引用元：Windows Vista および、Meiryo フォント登場記念 新フォントサイズ指定手法（The Trap of Web Design）

確かに、文字サイズをこういうパーセントで指定していると、文字の大きさが変だと思っていたのですが、こういう理由だとは知らなかった…。

まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。

それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしまう。

引用元：CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係（webデザイナーのナナメガキ）

ここの情報にちょっと補足。
「sans-serif」のみ指定した場合、欧文フォントの違いのみ書かれていますが、日本語フォントも違うんですよね。

Shift_JIS・EUC-JPの場合は「MS UI Gothic」
UTF-8の場合は「デフォルト指定されているフォント」
で表示されます。

さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。
EUC-JPのほうは、全部メイリオになっているのに……。

ちなみに、OperaとFireFoxだと、文字コードがどうであっても、「指定なし」は「デフォルト指定フォント」、「sans-serif」は「sans-serif指定フォント」、「※おおまかには問題ない指定」は「メイリオ」になってました。


今日の結論
謎だ……。調べたら調べるほど深みにはまる。
もうフォントの指定はしないほうが良いかもしれないですね。
そして、11pxと9pxの文字の指定は避ける。

あー、あと、ブラウザごとの文字の大きさの違いとかで悩んでいたことが、
続フォントサイズ指定手法（The Trap of Web Design）
で分かりました。
あとでまたじっくり見るためにも個人的にメモメモ。

さて、デザイン自体はあとチョットだから終わらせないと。
（あとちょっとで一区切りとなると、スピードが落ちるダメ人間）

2007/07/10追記
続・フォントの指定で「さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。」の原因が判明したことを書いてます。