Safari のフォントを調整する

2013年9月12日

Webkit 系のブラウザでは、大きな文字をきれいに表示するためにアンチエイリアスが強くかかり、文字が太って表示されてしまいもっさりした感じに見えることがある。

このため Safari では他のブラウザと比較するとタイトルなどが太く表示されてしまうことがある。

「-webkit-font-smoothing」は、Webkit 系ブラウザ（Safari/Google Chrome/Android等）で文字のアンチエイリアス機能の設定をする CSS プロパティで、以下の値を指定することが可能。

-webkit-font-smoothing の値とその意味
値	意味
none	アンチエイリアスなし
subpixel-antialiased	アンチエイリアス効果が最も強い。（デフォルト）
antialiased	アンチエイリアスあり

.wfs_none {-webkit-font-smoothing: none;}
.wfs_sa {-webkit-font-smoothing: subpixel-antialiased;}
.wfs_a {-webkit-font-smoothing: antialiased;}

値に「antialiased」を指定して、Webkit 系のブラウザで少し細めに見えるように設定する例。

h1 a{
  -webkit-font-smoothing: antialiased;
  font-size: 29px; font-size: 2.9rem; 
  font-weight: normal;
  letter-spacing: 0.06em; 
  color:#7E0F83;
}

Web Design Leaves

Safari のフォントを調整する