Mac OS 及び iOS の Safari では、他のブラウザと比べて文字が太く表示されます。
本来であればこれを CSS の「font-weight」プロパティで調節したいところですが、残念ながら根本的な解決に至らないケースがほとんど。
そこで新たな解決策として「-webkit-font-smoothing
」を使う方法を紹介します。
まず -webkit-font-smoothing
の仕様ですが、このプロパティには3つの値が用意されています。
-webkit-font-smoothing: none; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased;
ちなみに Safari でのデフォルトの値は -webkit-font-smoothing: subpixel-antialiased;
が指定されているようです。
お勧めはもちろん -webkit-font-smoothing: antialiased;
です。
別途、確認用のページを用意したので、こちらも合わせてご覧ください。
サンプルページ(Safari で見ないと意味がないですよ〜)