Detailed examples of font smoothing and antialiasing rendering in CSS3

This article mainly introduces the font smoothing and anti-aliasing rendering in CSS3, which has a certain reference value, the small partners of interest can refer to it.

While watching the official Drupal theme, I found an interesting non-standard CSS selector -webkit-font-smoothing , so I started playing with it. How do I use CSS3 fonts to smooth the display?

To be aware, there have been concerns about anti-aliasing rendering of fonts in CSS, such as Font-smooth, but there may be differences in font rendering between different operating systems and browser cores, in short, he has not been selected for the Web Standard. But WebKit still retains a set of its own non-standard selectors to support anti-aliasing to make the font display smoother.

-webkit-font-smoothingThere are three main properties:

1, none: no anti-aliasing

2, subpixel-antialiased (default): Sub-pixel smoothing is common in Mac OS and Mactype for Windows

3, antialiased: Grayscale smoothing is commonly used in mobile devices such as Android and iOS.

But after trying, my wood eyes couldn't tell the difference between the two. And this non-standard CSS is only available for most mobile browsers and desktop browsers such as Safari and chrome, such as the WebKit kernel. As for IE series, you don't support yourself, blame me ~

Here is a look at the actual effect, first of all, there is no anti-aliasing rendering:

The following is -webkit-font-smoothing: subpixel-antialiased the effect of smoothing with anti-aliasing rendering:

It can be seen that the font edge of the smoothness is not the same, plus it really looks a lot.

It has been tested that the browser's built-in base properties generally contain font antialiasing. But for the sake of insurance, or manually add a bar ~