Font smoothing and anti-aliasing rendering in CSS3

高洛峰
Release: 2017-02-22 13:12:04
Original
1581 people have browsed it

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.Font smoothing and anti-aliasing rendering in CSS3And 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~Font smoothing and anti-aliasing rendering in CSS3

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

CSS3中字体平滑处理和抗锯齿渲染

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

CSS3中字体平滑处理和抗锯齿渲染

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!