※この内容は15/08/12に更新しました。

理由：あまりに使えないソースコードだったので。

 

ここ最近、話題になりつつあるネタに触れようと思う。

 

「IE11でline-heightが効かない。」

「IE11で特定のフォントで下端に変な余白が生じる」

 

以上二点。

 

各サイト様では上記の事象の解釈や表現方法は違うものの発生してる事象としては同じものである。

 

最近は様々な仕事で、ベースのフォントを小塚ゴシックとなるものと　さ　れ　た　ため、現在、上記の現象に悩まされている。

 

仕事の際にも確認したもので、現象が発生したのは、小塚系・ヒラギノ系、更に游ゴシック。

いずれも美しい書体のデザイナーズフォントである。

 

が、どれだけ美しくともIEではダメ。

実は、かの現象はIE11だけで発生してるわけじゃない。

IE9〜11、いずれもだ。

 

 

念のためWindows7にOSのシステムフォントとしてメッセージボックスやアイコンなど設定してみたが、一向に再現せず。

IE9以降だけにフォントが異常な状態で読まれている。

フォント上端からベースラインまでの高さが、恐らくIEの中で正常に計算されていないのだろう。

 

完全にもはやお家芸とも呼べる独自仕様。

 

 

Q.解決策はありますか？

 

A.ありません。

 

 

 

ただし、代替策はあります。

オープンソースな源ノ角ゴシックの日本語書体は小塚ゴシックとほぼ同じです。

なのでこいつを使うようにしましょう。

 

・・・。

ユーザー環境に入ってないって？

 

 

そんな時のための@font-face。

@font-faceで源ノ角ゴシックを読み込むんだ！

で、IE6～8にだけユーザー環境依存で小塚ゴシックを読めばいいのさ。

 

まぁ、なんだかんだで、下手なフォントは使わず、メイリオを読み込むのが一番無難なんだろうけどね。