ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

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

2016年5月31日

サスガIE。

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

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

游明朝体・游ゴシック体の使用は注意しなくてはならない・・・ やってくれるねIE先輩! – Qiita IEで「游ゴシック/游明朝」を表示させると、文字の下側に由来不明の余白が生じる – マイクロソフト コミュニティ

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

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

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

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

IEでずれる。。。

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

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

原因

不明。

とりあえずの対応(サンプルコード)

CSS
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に明朝体を指定する場合のセットについては以下の過去記事をご参照ください。

CSSのfont-familyで明朝指定の基本セットはこれに決めた
このエントリーをはてなブックマークに追加