IEで謎の文字化け

IEでひらがなとカタカナのみが文字化けしてしまう怪現象について

ちょっとニッチな内容かもしれませんが、ある制作したWebサイトをIEで表示した場合のみ何故かひらがなとカタカナが文字化けしてしまうという怪現象が発生してしまいました。この怪現象が発生したのはフォント游明朝で指定していたサイトです。

当サイトで状況を再現してみました。下図が文字化け状況です。

IE豆腐化現象

これは由々しき事態です。IEは大きくレイアウト崩れを起こさず、表示できれば良いかなというスタンスで制作していましたが、文字が読めないのは大問題です。ということで、原因究明をしてみます。

全ての游明朝のサイトで文字化けが起こっているわけではない

何件か游明朝を指定しているサイトをIEで開いて見ましたが、文字化けが発生しているのは1サイトだけ、他のサイトは問題なく表示されていました。ということで游明朝を指定してるから文字化けしているという線な無しかなと思い、この1サイトのみ設定していて、他のサイトには指定していないことがあるのか調べてみました。

すると1点他のサイト違う指定をしている箇所がありました。それはfont-weightです。このfont-weightを300に指定していました。font-weight400以上にすると、この文字化けは発生しないようです。

細い書体にしたいということで指定していたfont-weightが今回の文字化けの原因だったようです。あまりこんなことをしていることは無いと思いますが、もしだれかの参考になれば幸いです。