Font smoothing and anti-aliasing rendering in CSS3

While looking at the official Drupal theme, I discovered an interesting non-standard CSS selector -webkit-font-smoothing, so I started playing 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-smoothingThere are three main properties:

• none: No anti-aliasing

• subpixel-antialiased (default): Subpixel smoothing is common in Mac OS and MacType For Windows

• antialiased: Grayscale smoothing is commonly used in mobile devices such as Android and iOS

But after trying, my wooden eyes 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:

The next step is to use -webkit-font-smoothing: subpixel-antialiasedThe effect of anti-aliasing rendering smoothing:

You can see it , the smoothness of the edges of the font 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 it manually

For more related articles on font smoothing and anti-aliasing rendering in CSS3, please pay attention to the PHP Chinese website!