REDLINE MAGAZINE | IE7のフォント絡みでこんな話があった

IE7のフォント絡みでこんな話があった

Twitter経由でこんなCSSのフォントサイズに関するバグを教えて頂きました。（バグと呼ぶのか、仕様と呼ぶのかは分かりませんが）発端はfloralさんのこの発言。

IE7で検証した？http://redline.hippy.jp/lab/css/bodyfontsize625.php

以前このブログで書いたこの記事。

>>RedLine Magazine : bodyにfont-size:62.5%を指定すると･･･

内容はbodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなるよというものでした。

そしてその記事に対して前述の通り、floralさんのポストからIE7だとなにやらバグがあるということが判明しました。そしてfloralさんがいろいろとヒントを残してくださいました。

floralさんからのヒント

• font-famiry:sans-serifとの組み合わせ。
• バグありますよ〜
• 69.9%以下だとどうなるのでしょうね（謎）
• バグる。とても素敵なサイズになりまっせ（謎
• あ、特定の文字サイズがね。

floralさん、モバイルからの投稿にも関わらず、こちらもしつこく「バグですか?」とか「emで指定する方の特定のサイズっすかー？」とか悠長に質問攻めにして、ほんとすみませんでした。ほんでもって結局どういう現象が起こるのか分からないままだったので、調べてみました。

ヒントを手がかりにググりまくる。・・・分からない。自分でサンプルソースを書いて検証しようとエディタで書きかけたまさにその時、究極の助っ人現る。

hamashun先生だー！

hamashun.com のShunさんが今から書こうとしてたソースをサクっと送ってくれました。さすが！仕事が速い！さっそくShunさんのくれたソースをFxとIE7でプレビューしてみる。するとこんな変化が。

フォントサイズを62.5%で初期化した後、sans-serifを指定していると指定していない場合よりもちょっと大きな文字サイズになりました。要素に1.4emやら140%やら、何かサイズを再指定して上書きするとsans-serifがあってもなくてもサイズは同等になるようです。

キャプチャだと分かりにくいかもしれないので、実際に指定を変更したファイル、置いておきます。(技術協力：hamashun.com　適当にソース書き換えてねと言われたものの、ほとんど書き換えてません。サーセン＞＜) IE7でタブを2つ並べてタブをパッパッって切り替えてみてください。「うおっ！ほんとだ！なんかデカさが違う！」っていうのが分かりやすいと思います。

>>62.5%とsans-serif、両方指定
>>62.5%だけを指定(sans-serifを削除)

IE7入れてない方は下記のキャプチャ図で見比べてみてください。左右どちらもIE7でのプレビューなんですが、有と無ではこんな風にサイズが変わりました。sans-serif有の場合だと、少し大きくなってしまうようです。

本当にトリガーはsans-serifだけなんだろうか

と思って他のフォントファミリーもいろいろ試してみましたが、大きな変化は何もありませんでした。(フォントが変わってデカさがちょっと違うっていうのは別にして)やっぱりsans-serifが特別な感じです。

sans-serifの前に他のフォントファミリーを指定していたら

上の例ではフォントファミリーにsans-serifしか指定していないんですが、日本語サイトの場合、sans-serifを指定する前に他のフォントを指定するケース、多いですよね(多分)。というわけでsans-serifの前に他のフォントの指定があったらどうなるのかやってみたところ、問題なくというか普通に意図どおりのサイズになりました。(デカくならずマメみたいなサイズのまま)

但し当然、そのsans-serifの前に指定したフォントが閲覧する人のパソコンに入ってなかったら、sans-serifが適応されるっつーことで、やっぱりサイズは変わります。例えば、winには元々ヒラギノ角ゴとか入ってないのに、ヒラギノとsans-serifしか指定してない場合などはこの不思議挙動に巻き込まれます。

んじゃ、どこからサイズが変化するのか

次に文字サイズの方に注目。62.5%だからsans-serifが反応するのかどうかの実験。100%から順に確認していきました。100%、90%、80%、70%、ここまではsans-serifを指定してもしていなくても何も変化はありませんでした。

問題の60%台に突入。69%、68%、67%、66%、ここまでは大丈夫。そして65.9%になった瞬間、大きな差が出ました。上のキャプチャのようにsans-serifを指定していない方は小さくなります。

文字サイズ65.9%以下、尚且つsans-serifしか指定してないケースに当てはまる事例がいくらあるかとか、サイズを上書きせずにそれを使うケースがあるのかとか、いろいろ疑問もあるのだけれど、例えば画像の側に「写真はイメージです」みたいに書いてある場所で結構文字サイズ小さいページもあるなーとかふと思いついたり。でもそこでIE7だけテキストがちょっと大きくなって困る事もないような・・・。

んじゃ、もしかして、floralさんがおっしゃってるバグって全然検討違いなんじゃね？とか思ったのは内緒。（な、なんだってーー！）もしかするとVista版のIE7だと何かまた違った表示になるんだろうかとも思ったんですが、手元にVista機がないので確認できませんでした。

文字サイズemにまつわるIE6のこんな話も

IE7からは少し離れるんですが、こんな話もあるよとShunさんから頂いたurl。

>>em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6)

上記ページにあるようにemで文字サイズを指定した場合のIE6の挙動がおかしいというバグがあります。今回の件と何か関係あるのかなと思ったんですけど、「なお、祖先要素でfont-sizeプロパティを%値や絶対単位の値で指定することで不具合を回避できます。」と書かれていたので、今回の場合bodyにちゃんと62.5%を指定している事からこれは関係なさそうだね、というところで決着。

ちょっとまて、IE6でも怪しいぞ

何気にIE6で確認したらこっちもおかしいじゃん＞＜
気になって他ブラウザでも確認する。が、NN、Opera、Safari3ではFx同様、文字のサイズに変化はなし。IE得意の「仕様」という名前の現象なんだな、これはきっと。

実はせっかく今回こういう機会があったので、今までIE7はStandalone版を使ってたんですが、検証するのに正規版じゃ挙動がチガイマスよーじゃ困るということで思い切ってメインマシンに正規版をインストールしました。上でIE6でもおかしいと書いたのはIE6のStandalone版と別マシンでの正規版でも確認済み。IE7もStandalone版、正規版共に同じ表示になるのを確認しました。

まとめ

一応調べた結果をこうして公開してみますが、floralさんのおっしゃってたバグがこれなのかどうか分かりません。何か他にこういうのがあるんだよとかあれば誰か教えてください。いえ、むしろ心境的には助けてくださいに近いものが…。

まぁ、それは別して今回調べたみたいな挙動もあるよーということでマメ知識。

• フォントサイズ65.9%以下とsans-serifを組み合わせるとIEで文字サイズが他ブラウザと異なる事がある。
• 但し、フォントサイズを再指定してスタイルを上書きすると、その挙動の発生は抑えられる。
• フォントファミリーに指定した他の優先されたフォントがある場合、sans-serifが指定されていても問題ない。
• 再指定するフォントサイズはemでも%でも大丈夫。
• レアだと思うけど、もしこのケースみたいに何か条件が揃ってIEだけ文字サイズが違うみたいなケースに出会った時は「こ、これはIEの『仕様』だろうな」と考えてみる。
• 他ブラウザでは特に問題なし。

よーし。これ投稿したらfloralさんに「これですかー？」って聞いてみるぞぃ！

2007年09月27日 13:50 | Red | パーマリンク