How to set font smoothing in css

In css, you can use the "-webkit-font-smoothing" attribute to set font smoothing, the syntax "-webkit-font-smoothing:subpixel-antialiased"; this attribute can make the fonts on the page anti-aliased , it will look clearer and more comfortable.

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

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:

• none: No anti-aliasing

• subpixel- antialiased (default): Sub-pixel smoothing is commonly used in Mac OS and MacType For Windows

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

But after trying it, 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:

Next is the effect of using -webkit-font-smoothing: subpixel-antialiased anti-aliasing rendering and smoothing:

It can be seen that the smoothness of the edges of the font is still different. Yes, it does look a lot 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~

Recommended learning: css video tutorial

The above is the detailed content of How to set font smoothing in css. For more information, please follow other related articles on the PHP Chinese website!