How to apply font smoothing effects in CSS?

Question

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

Are they supported by all browsers?

Answer 1

here you go sir :-)

one

.myElement{ -webkit-font-smoothing: antialiased; } 

2

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

Update: (see Duke)

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

Answer 2

Short answer: you cannot.

CSS has no methods that affect font rendering in a browser; only the system can do this.

Obviously, the sharpness of the text can be easily achieved with pixel-tight screens, but if you use a regular PC, it will be difficult to achieve.

There are several new fonts that are smooth, but when sacrificed it seems a little blurry (for example, look at most Adobe fonts). However, you may find fonts with a smooth but blurry design, Google Fonts .

There are several new CSS3 methods for rendering fonts and text effects, although the consistency, performance, and reliability of these methods have changed so much that you usually shouldn't rely too much on them.

Answer 3

It works best. If you want to use its sitewide without adding this syntax to each class or identifier, add the following CSS to the 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; }