以前下記の内容を書きました。
MacOSが El Capitan 以降の人ならこれで解決しますが、それ以前の人は解決しません。
旧式の「ヒラギノ角ゴPro」が当たってしまい、SafariとChromeでデブって見えてしまうのですが、一部サイトでは「ヒラギノ角ゴPro」のまま細身に見えていたので、調べたところ下記のCSSプロパティで解決しました。
「font-smoothing」で解決
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
ベンダープレフィックスが前提のプロパティのようですが、そもそも今はMacのSafariとChromeだけの問題なのでIEを気にする必要がありません。
font-smoothing
はフォントのアンチエイリアスを操作するプロパティで、適用できる値は以下。
subpixel-antialiased
: MacOSXのSafariとChromeのデフォルト値で、アンチエイリアス強antialiased
: 今回解決した指定で、アンチエイリアス弱none
: アンチエイリアスを切る。
適用したサンプルは以下。
See the Pen font-smoothing test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
OSXデフォのsubpixel-antialiased
だと、「subpixel」とある通りフォントの周囲数pxを巻き込むようなアンチエイリアスになるので太っていたようです。
アンチエイリアスを完全に切れるのは面白いですが、今のところMac専用のプロパティなので使い道は極めて少ないでしょう。