【CSS】-webkit-font-smoothing で safari の文字の太さを調節する。

Ads by Google

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 で見ないと意味がないですよ〜)

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です