Font rendering technology (font anti-aliasing technology)-webkit-font-smoothing:antialiased;

1.-webkit-font-smoothing-controlled font rendering is only valid for MacOS WebKit. So, when you set up-webkit-font-smoothing under the MacOS test environment, as long as you don't set it to none, how nice it is to set the property, anyway, this property is only for MacOS and will not go awry in other contexts (except for the case of none).

2, the front-end control font rendering interface is very scarce, if possible, as far as possible to control the output of the font, rather than control font rendering.

3, the following test will show that-webkit-font-smoothing on MacOS has the effect.

①windows

Test environment: Win7 Pro + Chrome:

Conclusion: The-webkit-font-smoothing attribute on Windows systems does not make a difference.

②ios

Test environment: IPad Air + iOS7 + Safari

(There is no Hiragino Sans GB on iOS, don't be misled by tags!)

Conclusion: On iOS, modify the-webkit-font-smoothing property and the result is:

·  -webkit-font-smoothing:none; No anti-aliasing

·  -webkit-font-smoothing:antialiased | subpixel-antianliased |  Default Grayscale Smoothing

③macos

Test environment: MBP + Safari:

Conclusion: On iOS, modify the-webkit-font-smoothing property and the result is:

·  -webkit-font-smoothing:none; No anti-aliasing

·  -webkit-font-smoothing:subpixel-antialiased |  Default Sub-pixel Smoothing

·  -webkit-font-smoothing:antialiased; Grayscale Smoothing

4, font anti-aliasing technology

The font anti-aliasing technique can be divided into the following categories:

· Black and white rendering: now extinct

• Grayscale rendering: Common terms for mobile devices such as Android and iOS

• Sub-pixel smoothing: Common for Mac OS and Mactype for Windows

· ClearType: A tradeoff between black and white rendering and sub-pixel smoothing. WinXP built-in, default off; Win7 above by default

Ideal shape: black and white rendering, grayscale rendering.

The principle of sub-pixel smoothing, which looks from right to left, notices a gradient in a pixel.

5, from the different platform browser font rendering to the analogy diagram visible clues:

6, the following table is my comprehensive multi-data results, welcome error Correction:

Source: https://segmentfault.com/q/1010000000467910/a-1020000000468107

Font rendering technology (font anti-aliasing technology)-webkit-font-smoothing:antialiased;