ウェブデザイナーのためのホームページ考察ブログ

WebデザイナーのためのWebページの考察を行うブログ。またはウェブページの作り方Tipsを語るブログ。

【はてな】IEで「はてなブログ」を見るとなぜか文字が太くなる問題

ウェブ制作を行う場合は複数のウェブブラウザでチェックするのは基本です。

主要なウェブブラウザは
ChromeIESafariOpera
になります。

ただ、はてなブログだから大丈夫だろうと高をくくっていて
このak毎日ブログは特にチェックしていませんでした。

僕はいつもGoogle Chromeをメインブラウザとして利用しているのですが
ふとIEで自分のブログにアクセスしてみたとき、
なぜかサイトの文字が全部太い!!

f:id:Keiro:20140714050359j:plain

これはひどい
強調している文字とか全然分かりません。

ただ全てのIEで問題が出ているかというとそうでもなく、
別のWindowsマシンのインターネットエクスプローラーで見たときは問題ありませんでした。

調べてみるとこういう情報を見つけました。
なんかメイリオフォントが悪さをしている可能性があります。

http://pc-diary.com/blog/2008/06/ie.html

他にも「ある日突然文字が太くなりましたとか」そういった情報があったので、もしかしたらWindowsのアップデートなどで何か起こってしまったんじゃないかと思ったりしています。

というわけで、まだまだIEで訪れているお客さんも多いのでそのままにしておくのも悪いため対策を行ってみました。

やり方です。

f:id:Keiro:20140714050406j:plain

はてなブログにログイン
②「設定」→「詳細設定」
③「headに要素を追加」に以下のコードを追加します。

<script type="text/javascript">
// <!--

if (~navigator.userAgent.indexOf('Mac OS X')) {
document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27ヒラギノ角ゴ Pro W3\x27, \x27Hiragino Kaku Gothic Pro\x27, sans-serif; } </style>');
} else {
document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27MS PGothic\x27, \x27メイリオ\x27, \x27Meiryo\x27, sans-serif; } </style>');
}

// -->
</script>

メイリオフォントに問題があると考えると、メイリオフォントを使用しないようにすれば問題ないと考え、フォントファミリーを修正しています。
メイリオフォントよりもMS PGothicの優先度をあげます。

これでIEで不自然に文字が太くなる問題が解決しました。

もしみなさんのサイトもIEで見たときに不自然に文字が太くなっていましたらお試しください。