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

サスガ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で明朝指定の基本セットはこれに決めた
    • このエントリーをはてなブックマークに追加
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2016/06/08)
    【読んだ】三国志 (吉川英治)
    前の記事>(2016/05/31)
    【Wordpress】アメブロの新着情報を取得する…PR記事の非表示とキャッシュの変更
    記事一覧