【CSS】游明朝・游ゴシックがIEでずれる

サスガIE。

こちらの記事で紹介した制作事例のサイトで、「見出しは明朝で」というオーダーがあったのでfont-familyに游明朝を組み込んでいたのですが、IEでまさかのレイアウトずれ。

調べたら、ちょこちょこいろんなところで悲鳴が上がっている模様。

游明朝・游ゴシックとは？

游書体は有限会社字游工房から出ている書体。

Winodws環境では、Winodws 8.1から、MacでもOS X Mavericksからプリインストールされるようになった。

特にWindowsでは、これまで明朝といえば美しいとは言い難いMS明朝系／OfficeにバンドルされているのHG系フォント（Office入ってないと使えない）しか選択肢がなかったので、游明朝の登場で一気に幅が広がりました。しかもMacと共通で使えるので、WEB制作における明朝フォントの救世主的存在と勝手に思っています。

IEでずれる。。。

文字下に謎の余白が出ます。

本文だとそんなに気にならないのですが、見出しだとレイアウトずれが如実にわかってしまうので致命的。

原因

不明。

とりあえずの対応（サンプルコード）

h1{
font-family :"游明朝", YuMincho;
padding: 0.2em 0.3em;
font-size: 1.5em;
}

@media all and (-ms-high-contrast:none){
	h1{
	padding: 0.3em 0.3em 0.1em;
	}
}

簡略化してありますが、上記のようにIE（IE10～）指定で、paddingを変更してやや力押しの調整。これだと要素ごとに個別に調整する必要がありますが、いまんとここれしかないかなーと思います。良き解決策があればぜひ教えてください。

ちなみにfont-familyに明朝体を指定する場合のセットについては以下の過去記事をご参照ください。