以前、インターネットエクスプローラー(以下IE)とFirefoxのフォントの大きさの表示のされ方違う、という事を嘆いておりました。いろいろ調べてみると、やっぱりそういう現象はあるみたいです。
スタイルシートで、font-sizeや、フォントの色などを変更 というエントリーで書いたのですが、ピクセル単位で指定しいるにもかかわらず、10px、11pxのfontは、Firefoxでは小さく表示されてしまうのです。(あるいはIEのフォントの表示がデカいのか?)
以前、無料ブログをボチボチと使っていた時にもfontのサイズの大きさに関しては、ちょっと悩んだことがあります。
その時はスタイルシートでfont-sizeをxx-smallに指定した時にFirefoxで文字の表示のされ方が小さすぎる、というものでした。
ですから、font-sizeをピクセル(px)指定にして、その時は問題が解決していたのです。
MovableType3.2をはじめてみると、デフォルト・テンプレートのスタイルシートでは、font-sizeが10px、11pxとピクセル単位で指定されているにもかかわらずこういう現象が生じています。
本当にこういうことが起こっているいるのか?
自分の気のせいでは?
とも思いましたが、小粋空間さんに詳しく書かれていました。
ユーティリティスクリプト(その1:フォントサイズ切り替え)
私はIE系のブラウザをメインブラウザで利用しているのですが、Netscape や Firefox の Mozilla系ブラウザではサイドバーのフォントサイズがやや小さくなります。
以前はスタイルシート切り替えを用いてフォントを切り替えられるようにしていたのですが、一度切り替えるという必要があり、ユーザビリティ上好ましくないのでとりやめました。
なるほど、Firefoxで文字が小さくなるという現象はやっぱりあったんですね。
しかもかなり以前から小粋空間さんはこの事に気づかれており、いろいろな方法で対処されていたようです。
・スタイルシート切り替えを用いてフォントを切り替えられるようにしていた。
・ユーティリティスクリプト(その1:フォントサイズ切り替え)
フォントサイズを切り替えられることが分かりましたので、これに古典的手法であるブラウザ判定を加えて実装しました。
とりあえず私のサイトではMozilla系ブラウザの場合、1pxだけフォントサイズを大きくするように設定しています。
・アンダースコア・・・.
CSSで設定したプロパティ(width/font-color等)の前にアンダースコア "_" を付与すると、WinIEではそれを正常なプロパティとして読み込み、他のブラウザでは無視される(=定義されていないプロパティとして認識される)ことを利用した「アンダースコア・・・」を紹介します。
font-sizeを10px、11pxに指定したい方は、いずれかの方法で対応できると思います。
良かったらお役立て下さい。
MTひよっこは、「font-sizeを全て12px以上に指定する」というアナログな方法で対応しております(笑)。
@ 2006年03月10日