css

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

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

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

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

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

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

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

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

実装例

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

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