フォント

WEB制作

【Mac対策用CSS】なぜかMacだけ文字が太い時はfont-smoothingで一発解決

特にMac対応のためにあるわけじゃないが、Windowsではどのブラウザで見てもすごくいい感じなのに、Macだとどのブラウザで見てもフォントが汚い(妙に太いとか)時は、font-smoothingというCSSをぶち込めば解決するかも、という覚書。

フォント問題はOSでバラバラだから苦労する

モバイルファーストの時代に、普通のサイトだったら1桁%しかいないMacユーザー対応する必要あるのか疑問ではあるけど、Macで見ると我慢ならないくらいフォントがおかしい場合がある。

黒っぽい背景に20~30pxくらいの太文字を表示させた時がそうだった。Windowsではメイリオの太字でいい感じなのだが、Macだとメイリオはない。ヒラギノ角ゴとかMacの定番を使うも、太字にすると妙におかしい。Windowsが太字でMacはノーマル、というのが簡単にできればいいのだが、対応コストや検証が手間かかり過ぎる。

游ゴシック(YuGothic)というWindows10と新しい目のMacに標準で入っているフォントを使うことも検討したが、游ゴシックも問題が山ほどあってクソ使いにくい。

結論は、Macのフォント描画システムがおかしい(?)から

おかしいというと語弊があるが、少なくとも多数派であるWindowsと同じ表示をしない。

黒っぽい背景に文字を載せるとMacだけ妙に太く見えるのは、Macのフォント描画のせいだと思うので、font-smoothingというフォント描画を制御するCSSを付け足す。アンチエイリアシングに関する設定らしいが、Windowsではこんなことしないので答えがわかるまで苦労した。丸1日くらい色々悩んだ。

実装例

↓こんな感じで目的の文字(h1とか、h2とか)に付け足すだけ。微妙なものかと思ったら、びっくりするくらい変わってWindowsと同じになった。

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;