Shulou(Shulou.com)06/01 Report--

This article is about how CSS3 implements anti-aliasing rendering of fonts. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Anti-aliasing rendering of fonts can make fonts look clearer and more comfortable. Today, when icon fonts have become a trend, anti-aliasing rendering is used more and more.

Font-smoothing is a non-standard CSS definition. It was included in the draft of the standard specification and later removed from the web standard for some reason.

However, we can render anti-aliasing with the following two definitions:

-webkit-font-smoothing:antialiased;/*chrome, safari*/

-moz-osx-font-smoothing:grayscale;/*firefox*/

1.Webkit supports this effect in its own engine.

-webkit-font-smoothing it has three attribute values:

1) none: better for low-pixel text

2) subpixel-antialiased: default

3) antialiased: anti-aliasing is very good

Example:

Body {

-webkit-font-smoothing:antialiased

}

This property makes the font on the page anti-aliased and makes the font look clearer when used. After adding it, I immediately feel that the page is a little clear.

2.Gecko has also introduced its own non-standard definition of anti-aliasing effect.

-moz-osx-font-smoothing:inherit | grayscale; is also used for a clearer purpose.

Example:

.icon {

-webkit-font-smoothing:antialiased

-moz-osx-font-smoothing:grayscale

}

The 3.Ionic framework adds an extra font-smoothing:antialiased to the style

This is waiting for font-smoothing standardization, be prepared for it.

Thank you for reading! On "CSS3 how to achieve font anti-aliasing rendering effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.