WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

最近ではWebサイトを制作する時にフォント指定で「游ゴシック」や「游明朝」を使用することが増えてきました。
ですが、思わぬ所で落とし穴が…。

游ゴシック体・游明朝体はWindowsとMacどちらでも使用可能

WindowsとMacどちらでも使用可能なフォントなので、見た目を揃えたい時に大変便利なフォントです。
MacではOSX Mavericksから、WindowsではWindows8.1から標準でインストールされています。
Microsoft公式からも無料でダウンロードができます。

IE11の落とし穴とは？

Webサイト制作をしている際にブラウザの検証を行いますが、IE11で見た時だけ実はフォントに余白ができています。
実際に他のブラウザと比較をして見てみましょう。

IE

Firefox

Chrome

テキスト部分をカーソルでドラックしてみると、下に謎の余白ができていますね。
IEで見た際メイリオには余白はついていないので、游ゴシック体や游明朝体の時になるようです。
おそらくバグのようですが、余白によってテキスト位置が上に寄って見えてしまうのが難点です。

対処方法

対処方法として以下が有効です。

• IE11のみCSSハックで、余白を調整する
• IE11のみCSSハックで、別のフォントへ変更する

見え方を統一させるという意味では、余白調整を行うほうが良さそうですね。
IE11のCSSハックは以下です。

@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, #適用させたいid名やclass名 {
		/*ここに余白調整用の記述*/
	}
}

まとめ

ブラウザごとに微調整を行わないといけないので大変ではありますが、今後も游ゴシック体や游明朝体は主流になっていく今のうちに対処法を知って対応していきましょう！

誰でもつかえる！ウェブフォント実践マニュアル (技術書典シリーズ（NextPublishing）)

posted with amazlet at 19.02.07

インプレスR&D (2018-07-13)
売り上げランキング: 50,092

Amazon.co.jpで詳細を見る