66

How can we apply Photoshop-like font anti-aliasing such as crisp, sharp, strong, smooth in CSS?

Are these supported by all browsers?

putvande
  • 15,068
  • 3
  • 34
  • 50
Mehar
  • 2,158
  • 3
  • 23
  • 46
  • I think that your question should be "Is it possible to apply Photoshop font effects in stylesheets?" – Diogo Moreira Jul 25 '13 at 17:27
  • Unfortunately no, read this: http://stackoverflow.com/questions/5811166/does-css-support-text-anti-aliasing-such-as-crisp-sharp-etc-yet – Joe_G Jul 25 '13 at 17:27

3 Answers3

118

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;
}
Ryan Taylor
  • 12,559
  • 2
  • 39
  • 34
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
12

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.

Jace Cotton
  • 2,004
  • 1
  • 21
  • 38
  • 1
    What about `-webkit-font-smoothing`? – Jasper Nov 04 '13 at 18:59
  • 2
    @Jasper that's for `-webkit-` only (which would be Safari). Chrome and Opera have now dropped vendor prefixes, and if they're not supported via no-vendor (e.g. `font-smoothing` with no `-webkit-`) then the feature is not supported. Using font smoothing is heavily unreliable and consistently inconsistent. – Jace Cotton Nov 04 '13 at 19:03
  • 1
    Curious as to why this is getting downvoted. If you do so, please enlighten me. The other answers either don't work or aren't supported by all browsers. – Jace Cotton Dec 31 '15 at 06:40
  • I am downvoting it because adding those css to my website made my icon font rendering much better which goes against your short answer. – Jonathan Jul 16 '20 at 17:24
  • 1
    @Jonathan You should not downvote because he is actually the one answering the real question here. The OP is very specific about ALL browsers. This isn't a standardized feature. – EJTH Nov 06 '20 at 12:24
10

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;

}
user3267537
  • 131
  • 2
  • 10