ヒラギノ角ゴが太く見える問題を解決する：その2

以前下記の内容を書きました。

ヒラギノ角ゴが太く見える問題を解決する

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 : アンチエイリアスを切る。

適用したサンプルは以下。

OSXデフォのsubpixel-antialiasedだと、「subpixel」とある通りフォントの周囲数pxを巻き込むようなアンチエイリアスになるので太っていたようです。

アンチエイリアスを完全に切れるのは面白いですが、今のところMac専用のプロパティなので使い道は極めて少ないでしょう。