Cmlap News, articles Font smoothing trick in Google Chrome

Font smoothing trick in Google Chrome

In Google Chrome browser the font smoothing (antialias) not perfect.
If we comprare (clearly show the difference in larger font size), the difference is very big compared to Firefox and Explorer browsers
Experienced when i make a webpage exactly with google webfonts, that if i look it in Chrome the edge of text very "pixel". (In the following picture this doesn't seem properly, because image editor antialiased the image , but if you try out the letters edge not smooth.)

Not smoothed font

And this is the trick:
Text with font smoothing

The solution is very simple: put a very pale shade behind the text, and the browser smudge the edge of pixels and text disappear smooth. This is a CSS3 property, but Chrome use it properly and no problem in other browser .

like this:

h2{text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}


Remember the text-shadow parameter:
1.param: text shadow left offset
2.param: text shadow top offset
3.param: the blur offset (the shadow is sharper or smoother : smaller number sharper shadow)
4.param: the shadow color in rgba : rgba(red,green,blue,alpha transparency)
alpha transparency maximum is 1 which means that is not transparent.



Ha tetszett vagy hasznosnak talltad, krlek oszd meg!
Author / szerz:
More news in theme / Tovbbi cikkek
Hozzszlsok
Vlasszon nyelvet!
Keress a tartalomban
Kattintson ide az adatok elkldshez!