Google Chromeのテキストが細く見えるのを解決できるかもしれない方法

Webサイトを作っているときに、FirefoxとGoogle Chromeでテキストの太さが違って見えることが時々あるのですが、解決しそうな方法を見つけたのでメモします。

解決したいこと

たとえば下記画像のように、FirefoxとGoogle Chromeでテキストフォントの太さを比べたときに、Google Chromeのほうが細く見えることがあるので、これをなんとかしたい。（画像はどれもクリックすると拡大できます）

• Firefox
  
• Google Chrome
  こちらのほうが全体的にテキストがなんだか細く見える
  

また、こういう違いが起きてるときは、Safariで見てもGoogle Chromeと同じように見えるので、FirefoxとWebKitを使ってるブラウザで比べると違って見えてるような気がします。

• Safari
  これまた全体的にテキストがなんだか細く見える
  

環境

ちなみに、こんなふうに見えてる環境は以下です。

• OS：Mac OSX 10.10.1
• ブラウザ：
  • Google Chrome 38.0.2125.122
  • Firefox 33.1
  • Safari 8.0

解決策

CSSのテキストに関わるプロパティでなにか解決できるんじゃないかと思って調べたところ、これを入れたらよくなりました。

[code]-webkit-font-smoothing: subpixel-antialiased[/code]

具体的には、たとえばこれをこんなかんじで入れてみたら、
[code]body{
-webkit-font-smoothing: subpixel-antialiased;
}[/code]

こんなかんじの見ために。

• Firefox
  
• Google Chrome
  
• Safari
  

めでたく、よき程度に文字が太くなりました。

「-webkit-font-smoothing」プロパティ

この「-webkit-font-smoothing」は、今まで知らなかったのですが、テキストフォントのアンチエイリアスを調整してくれるCSSプロパティだそうです（Webkit系ブラウザのみ適用）。

プロパティの設定値
[code]-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;　// デフォルト
-webkit-font-smoothing: antialiased;[/code]

参考記事

こちらの記事がとても参考になりました。「-webkit-font-smoothing」について、くわしくはこちらをご覧ください。
[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]CSS – font-smoothingでOSXでのフォントのレンダリング方法を調整する – Qiita[/icon-box][clear]
[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]CSSでフォントのアンチエイリアスを調整するプロパティ | モンキーレンチ[/icon-box][clear]

まとめ

こういう現象は起きたり起きなかったりするのでよくわかりませんけれど、海外の方が制作されたWordPressテーマを使うと時々こうなるので、そのあたりになにか原因があるのかもしれません。ただ、必ずこれで解決するかどうかわからない気もするので、とりあえずこの方法を試してみる、という感じで使ってみるのがよさそうです。