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

问题

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

Are these supported by all browsers?

回答1:

here you go Sir :-)

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

回答2:

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.

回答3:

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;

}

来源：https://stackoverflow.com/questions/17864742/how-to-apply-font-anti-alias-effects-in-css

标签

html

css

css3

antialiasing