特に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;