IEでfont-family:明朝体を使う際に気をつけること【バグ】

font-familyで明朝体指定の際に気をつけないといけないことメモ。

テキストを明朝体にすることで強調させたり、他のテキストと区別させたい。
基本的には、
「font-family: serif;」なら明朝体
「font-family: sans-serif;」ならゴシック体
になるはずです。

chromeやsafariでは問題ありませんが、
IEでは明朝体指定したテキストが、こんな表示になってしまうことがあります。

どうやらIEでは、フォント名を具体的に書かないといけないようです。

■明朝体

font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho',serif;

■念のためゴシック体も

font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

このように具体的に指定することで問題解決です。

フォントに興味のあるかたにオススメ☆

▼フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？
普段なにげなく目にしている身近なロゴがどういう背景を持ち、どんな意図があるフォントなのかについて書かれています。
この本を読んだら、日々の生活に対する視点が少しだけ増え、毎日が楽しくなるかもしれません☆
お仕事でデザインに携わっている方にも、そうでない方にも楽しめる本です。オススメです。