Detailed explanation of font smoothing and anti-aliasing rendering examples in CSS3

This article mainly introduces font smoothing and anti-aliasing rendering in CSS3. It has certain reference value. Interested friends can refer to it.

While looking around at the official Drupal theme, I discovered an interesting non-standard CSS selector -webkit-font-smoothing, so I started playing around with it. How to use css3 fonts to display smoothly

You must know that W3C has considered anti-aliasing rendering of fonts in CSS, such as font-smooth, but it may be due to the rendering of fonts by different operating systems and browser kernels. There are differences, and in short, it was not selected into a web standard. However, WebKit still retains a set of its own non-standard selectors to support anti-aliasing effects to make fonts display smoother.

-webkit-font-smoothing Mainly has the following three attributes:

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 it, my wooden eyes I can't tell the difference between the latter two at all. And this non-standard CSS is only applicable to most mobile browsers and desktop browsers with WebKit core such as Safari and Chrome. As for the IE series, you don’t support it yourself, blame me~

Let’s take a look at the actual effect. First of all, it does not use anti-aliasing rendering:

Next is the effect after smoothing using -webkit-font-smoothing: subpixel-antialiased:

It can be seen that the edge of the font The smoothness is still different, and it does look much better after adding it.

After testing, it was found that font anti-aliasing is generally included in the built-in basic properties of the browser. But to be on the safe side, let’s add one manually~

The above is the detailed content of Detailed explanation of font smoothing and anti-aliasing rendering examples in CSS3. For more information, please follow other related articles on the PHP Chinese website!