How to apply font anti-alias effects in CSS

Question

How can we apply Photoshop-like font anti-aliasing such as crisp  sharp  strong  smooth in CSS   Are these supported by all browsers

User · Accepted Answer

here you go Sir  -   1   myElement      -webkit-font-smoothing  antialiased      -moz-osx-font-smoothing  grayscale      text-rendering  optimizeLegibility      2   myElement      text-shadow  rgba 0 0 0  01  0 0 1px

User · Answer

Works the best  If you want to use it sitewide  without having to add this syntax to every class or ID  add the following CSS to your css body   body        -webkit-font-smoothing  antialiased      text-shadow  1px 1px 1px rgba 0 0 0 0 004       background  url    images background png        text-align  left      margin  auto

User · Answer

Short answer  You can t   CSS does not have techniques which affect the rendering of fonts in the browser  only the system can do that   Obviously  text sharpness can easily be achieved with pixel-dense screens  but if you re using a normal PC that s gonna be hard to achieve   There are some newer fonts that are smooth but at the sacrifice of it appearing somewhat blurry  look at most of Adobe s fonts  for example   You can also find some smooth-but-blurry-by-design fonts at Google Fonts  however   There are some new CSS3 techniques for font rendering and text effects though the consistency  performance  and reliability of these techniques vary so largely to the point where you generally shouldn t rely on them too much

[html] How to apply font anti-alias effects in CSS?

Examples related to html

Examples related to css

Examples related to antialiasing