游明朝体・游ゴシック体を使うとIEでズレてしまうのでCSSで対応

CSS

WEB制作時にfont-family指定で「游明朝」と「游ゴシック体」を使用するとIEで確認した時にベースラインがズレてしまうということがあります。

とりあえずの解決策としてWindows IEでの表示の際だけCSSで他のフォントが表示されるように指定。

たとえばクラス名を.yuminchoとすると

/* 通常のフォント指定 */

.yumincho{
font-family :“游明朝”, YuMincho;
}

/* IEのみに適用させるフォント指定 */

@media all and (-ms-high-contrast:none){
.yumincho{
font-family: “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “MS P明朝”, “MS 明朝”, serif;
}
}

その他にもIEだけズレた分を@media all and (-ms-high-contrast:none)を使用してpaddingで補正するなど。

IEだけに適用させる手段を覚えておくといざという時に助かりますね。

Follow me!