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

This article introduces the knowledge of "how to use css3 anti-aliasing attributes". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The anti-aliasing property of css3 is "font-smoothing", which is mainly used to control the smoothing effect of font rendering and anti-aliasing rendering of fonts. The "font-smoothing" attribute is non-standard and requires compatibility with prefixes such as "- webkit-" and "- moz-osx-".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The anti-aliasing property of css3 is "font-smoothing".

The font-smoothing attribute is mainly used to control the smoothing effect of font rendering. Anti-aliasing can be used to render fonts to make them look clearer and comfortable.

Syntax:

/ * Keyword values * / font-smooth: auto;font-smooth: never;font-smooth: always;/* value * / font-smooth: 2em

The main function of this style is to adjust the aliasing of the font.

Font-smoothing is a non-standard css rendering rule. Because different operating systems render different fonts and different browsers have their own set of rules for interpreting styles, this css style has not been added to the web standard.

Webkit implements a similar attribute called-webkit-font-smoothing. This property takes effect only under Mac OS X/macOS.

None-turns off font smoothing; displays text with jagged edges.

Antialiased-smoothed fonts at the pixel level, not sub-pixels. Switch from sub-pixel rendering to the anti-aliasing of light text on a dark background to make it look lighter.

Subpixel-antialiased-on most non-retinal displays, this will provide the clearest text.

Firefox implements a similar attribute called-moz-osx-font-smoothing. This property takes effect only under Mac OS X / macOS.

Auto-allows browsers to choose a way to optimize font smoothing, usually grayscale.

Grayscale-renders text with grayscale anti-aliasing instead of sub-pixels. Switch from sub-pixel rendering to the anti-aliasing of light text on a dark background to make it look lighter.

Inherit

Unset

-webkit-font-smoothing is an anti-aliasing adjustment that webkit adds to its rendering engine. This adjustment is obvious in ios, but not obvious in windows.

Test: 5x magnification

This is the end of the content of "how to use css3 anti-aliasing properties". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.