まえがき

先日PCを買い換えました。

OSはWindows8
CPUはCore i7-4770 3.40GHz
メモリは16GB

これで無敵だぜヒャッハーとか思っていたらとても不思議な現象に出会いました。

ブラウザに表示されるフォントがめちゃくちゃ汚いのです。

このKoToRiBlogのfont-familyはメイリオを指定しているのですが、そのメイリオフォントがめちゃくちゃ汚いのです。
もちろんKoToRiBlogだけではなく他のメイリオを指定しているサイトのフォントも汚く表示されていました。

原因として考えられるのは、
KoToRiはPCのUIでフェードインとかスライドアウトとかそういう無駄な処理は全部外して、限界までパフォーマンス重視にしたい人なのでPCを買って真っ先にその辺の設定をいじりました。

しかし、元に戻したのですがフォントが汚いのは直りませんでした。
てかそもそも設定をいじくる前はブラウザに表示されるフォントが綺麗だったのかどうかも覚えていないわけです。

結局何が原因でそうなってしまったのかは不明のままですがとりあえず元に戻ったのでその時に行ったことを書いていきます。

汚いメイリオフォント

汚いとはどういった状況なのかをまず提示しなければなりませんのでスクショを撮りました。
KoToRiBlogのとある記事のテキストです。
画像をクリックすると100%に拡大されます。100%の状態のフォントの感じをご覧ください。

シャギシャギですね。

この時のfont-familyの指定です。

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

なにも間違っていないはずです。
現に職場のwindows7で閲覧すると美しいメイリオフォントが表示されていました。

このシャギシャギフォントならfont-familyを何も指定しない状態で表示されるフォントの方がマシな状態でした。

Meiryo UIフォントの存在

どうにもこうにも綺麗なフォントが表示されず諦めかけていたのですが
「Windowsのオフィシャルサイトなら確実にメイリオを使用しているはず。このブラウザでWindowsのサイトを閲覧したらフォントはどう表示されるのだろう」
と思い実際に見てみると綺麗に表示されているではありませんか。

Windows

因みにブラウザはChromを使用していました。
Windowsのサイトのフォントを確認してみると

‘Meiryo UI’というフォントが指定してありました

Windowsサイトのfont-familyです。

font-family: 'Meiryo UI',Meiryo,'Yu Gothic','MS PGothic','Segoe UI',Tahoma,Helvetica,sans-serif

えっ？Meiryo UIって何？普通のメイリオと違うの？てかfont-familyってフォント名を日本語でも明記しなきゃダメなんじゃないの？英語表記だけでOKなの？
という疑問が湧きます。

Meiryo UIとは

調べてみたところ、Meiryo UIはWindows 7から追加された標準フォントでメイリオの派生バージョンです。
文字幅の広いメイリオに対してMeiryo UIは文字幅が狭くなっている。

font-familyの指定は日本語でも明記しなきゃダメなんじゃないの？

そもそも何で英語表記だけではなく日本語表記でも指定しなきゃいけないのかというところですが、
Firefoxは何故か「Meiryo」や「Hiragino Kaku Gothic Pro」など日本語フォントがアルファベット表記で指定してあると無視されてしまうため「メイリオ」や「ヒラギノ角ゴ Pro W3」みたいな感じで日本語で明記する必要があります。
反対にsafariは日本語表記が無視されます。なので日英両方指定しなければいけないというめんどくさい状況でした。

例えばこんな感じ。

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

しかし、今確認してみたところ英語表記だけで問題ないようです。Firefoxの新しいバージョンであれば問題なくフォントの指定が効いています！

フォントの指定は英語表記のみで大丈夫です！

Google Choromeのデベロッパーツールでfont-familyの指定を変更

試しにKoToRiBlogのfont-familyを「Mairyo UI」にChromeデベロッパーツールで指定してみたところWindowsサイトと同じフォントになりました！！
やったー！って感じでとりあえずfont-familyを普通の「メイリオ」に戻したら。。。

あれ、フォントが綺麗になってる！？

何故か直りました。

それ以降、どのサイトの「メイリオ」フォントもとっても綺麗に見えるようになりました。
意味が分かりません。

まとめ

結果的によくわからない感じで直ってしまいましたが、font-familyにいちいち日本語表記で指定する必要がなくなったことと、Meiryo UIというフォントがあるという事を知れたのでよしとしましょう！