IEでの游ゴシックの表示

フォントはサイトのデザインを決めるうえで、重要なものです。

使用するフォントによって、サイトの表示速度や、
ブラウザなどの環境によっては、表示がおかしく見えてしまったりなど、注意深く検証する必要があります。

今回は游ゴシックを使うときの問題点です。

一番の問題はIEでの表示が、テキストの下に余白ができてしまうことです。

対策として一番簡単なのは、IEのみフォントををメイリオにすることです。

html{
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
/*IE用の記述*/
_:-ms-input-placeholder, :root{
  font-family: Meiryo, sans-serif;
}

見出しなど限定的に使用したい場合などは

.tittle {
  padding: 6px 15px;
}

/*IE用の記述*/
_:-ms-input-placeholder, :root .tittle {
  padding: 10px 15px 4px 10px;
}

余白などをIE用のハックで別に余白を設けてあげるなど、個別に指定してあげることです。

游ゴシックを使用したデザインを作成する場合、見出しやナビゲーションで使用するのかよく考慮して製作する必要がありますね