anti005

最近、ブログテーマのCSSをカスタマイズしているときに気づいたのですが、同じfont-weightプロパティを使っているのに他のWebサイトと文字の太さが微妙に違うことに気が付きました。

調べてみるとブラウザでHTMLを解釈して文字や画像を表示させるレンダリングという作業のときに使うレンダリングエンジンによって文字の太さが微妙に変わってくることが分かりました。

一般的にSafariやChromeなどのWebKit系ブラウザで文字が太く表示されるそうです。私の環境でも確認しました。本日はブラウザによって文字の太さが微妙に違う問題を解決する方法を紹介します。

スポンサードリンク

微妙な違いですが…

anti003

Safari、Chromeだと文字が少し太く表示される。

anti002

後述する方法で文字を細く表示させた結果。

レンダリングエンジンの違いで微妙に文字の太さが違う

冒頭でも述べましたが、レンダリングエンジンの違いで文字の太さに違いが出るようです。これを解決するにはフォントのアンチエイリアスのかけ方を変更するCSSプロパティ「-webkit-font-smoothing」を新たに追加すれば良いそうです。

プロパティの値を変更して試してみました。

-webkit-font-smoothing: none;


東京箱根間往復大学駅伝競走は毎年1月2日と3日に行われる大学対抗で行われる駅伝大会である。

-webkit-font-smoothing: subpixel-antialiased; // Safari, Chromeでのデフォルト値


東京箱根間往復大学駅伝競走は毎年1月2日と3日に行われる大学対抗で行われる駅伝大会である。

SafariやChromeのデフォルト値「subpixel-antialiased」だと文字が太く主張が強い感じ。

-webkit-font-smoothing: antialiased; // 当ブログの設定値
-moz-osx-font-smoothing: grayscale; // Firefoxでの設定値


東京箱根間往復大学駅伝競走は毎年1月2日と3日に行われる大学対抗で行われる駅伝大会である。

当ブログで現在使っている値「antialiased」すっきりしていて読みやすい。個人的にはこれが好き。

body {
color: #333;
background: #f7f5ed;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}

結果的にbodyの中身がこうなりました。

フォントの設定は難しいですね。MacとiPhoneでみるときでも随分印象が違いますし、自分の環境では読みやすくても他の方からすると見づらいかもしれません。今後も様々なものを試して読みやすいフォントの設定を探していきます。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。