How to achieve font anti-aliasing rendering effect in CSS3? -webkit-font-smoothing property (example)

This chapter will introduce to youHow to achieve font anti-aliasing rendering effect in CSS3? -webkit-font-smoothing attribute (example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Anti-aliasing rendering of fonts can make the fonts look clearer and more comfortable. Today, as icon fonts become a trend, anti-aliased rendering is increasingly used.

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

However, we can use the following two definitions for anti-aliased rendering:

-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 value

3) antialiased: anti-aliasing is very good

Example:

body{
   -webkit-font-smoothing: antialiased;
}

This attribute can make the font on the page anti-aliased. After using it, the font will look like will be clearer. After adding it, the page suddenly felt smaller and clearer.

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

-moz-osx-font-smoothing: inherit | grayscale;This property also has a clearer effect.

Example:

.icon {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

3. The Ionic framework adds an additional font-smoothing: antialiased;

to the style. Are you waiting for font-smoothing to be standardized to be prepared?

The above is the detailed content of How to achieve font anti-aliasing rendering effect in CSS3? -webkit-font-smoothing property (example). For more information, please follow other related articles on the PHP Chinese website!