blue

-webkit-font-smoothingは Retinaでのみ適用させるのがいいのではないか

  • Posted by: SOMA Hitoshi
  • December 27, 2016 2:36 PM
  • web

 ブラウザにおけるフォントのレンダリング具合を調整する、

-webkit-font-smoothing: antialiased; /*Safari, Chrome*/
-moz-osx-font-smoothing: grayscale; /*Firefox*/

という CSSについてはその表示結果を絶賛するブログも多くあり、海外のオシャレ系 CSSではもはやデフォルト気味に適用されていたりするのだけれど、これ、手放しに絶賛しているひとはディスプレイが Retinaなのじゃないかと思うのだった。
 それぞれ、上記の指定をしなかった場合のデフォルト値は

-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;

というもので、ごく雑な解説をすれば、前者の指定があると、後者のデフォルト状態よりも文字が細くレンダリングされる。その効果が覿面なのは解像度の高い Retinaディスプレイにおいてで、こと Retinaにかぎって言えば──どのみち〈好みの問題〉ではあろうものの──これは断然、前者の指定をしたほうが美しいと言い切ってしまいたいくらいだ。

 なのだけれど、これが 72dpiとか 96dpiの非 Retinaディスプレイとなると、その細目のレンダリングはかなり視認性が悪くなり、文字色にもよるだろうが、たんに「なんだか読みづらい」という印象を与えるだけのように個人的には思える。

 というわけで、このフォントレンダリングについての CSSを Retinaにかぎって適用させるための作法を以下に。

 といって、解像度を判定するためのメディアクエリ「 resolution」は Webkitベースのブラウザが未対応だったりするので、もろもろベンダープレフィックス付きの独自プロパティを組み合わせることになる。そのへんの現状最善策はここに簡潔にまとめられているのを参照し、結果、このような感じになった。

@media (-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(min-resolution: 2dppx),(min-resolution: 192dpi){
	html, body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

 以上。

関連記事

トラックバック(0)

トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/1088

 

広告