Css3 attributes-webkit-font-smoothing, css3

Css3 attributes-webkit-font-smoothing, css3

Anti-sawtooth rendering of fonts can make the font look clearer and more comfortable. As icon fonts become a trend today, more and more anti-sawtooth rendering is used.

Font-smoothing is not defined as a standard CSS. It was included in the draft of the Standard Specification and was removed from the web Standard for some reason.

However, we can use the following two definitions for anti-sawtooth 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 property values:

None------ Relatively good for low-pixel text

Subpixel-antialiased------ Default Value

Antialiased------ Good anti-aliasing

Example:

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

 

This attribute can make the font on the page anti-sawtooth, the font looks clearer after use.

After adding it, I suddenly felt that the page was small and clear.

(2) Gecko has also released its own non-standard definition of anti-tooth effect.

-Moz-osx-font-smoothing: inherit | grayscale;

This attribute is also more clear.

Example:

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

 

(3) The Ionic framework adds a font-smoothing: antialiased in the style;

This is to wait for the font-smoothing standardization, are you ready.