CSSで文字をシャープに見せる方法。
|
Web制作のこと
にじんでいた・・・。
同じフォントを指定しているのに、ブラウザによって微妙に太さが違う事があって、どうにか統一できないものかと調べてみました。
そもそもブラウザによってフォントにそれぞれ独自のレンダリングがフィルターされていたのです。
「にじんでいた」が当てはまるかは怪しいですが、ほんの少しだけ文字がボケて表示されていました。
CSSに書き足すだけでシャープにできた！
実に簡単でした。
フォントをシャープに表示するCSS
|
1 2 3 4 |
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
例ではBodyに入れちゃってますが、不都合があれば任意の場所に入れてください。
値の意味
Webkit
|
1 2 3 |
-webkit-font-smoothing: none; //アンチエイリアスをしない -webkit-font-smoothing: antialiased; //アンチエイリアスをする -webkit-font-smoothing: subpixel-antialiased; //デフォルト |
Firefox
|
1 2 3 4 |
-moz-osx-font-smoothing: grayscale; //シャープに -moz-osx-font-smoothing: unset; //デフォルト値に戻す -moz-osx-font-smoothing: inherit; //親要素より継承する -moz-osx-font-smoothing: auto; //システムのデフォルトに |
基本的には「フォント」をシャープに表示するCSSで大丈夫だと思います。
