(clicktop public public number, you can quickly follow)
Source: Ctrip Design Committee
URL: http://ued.ctrip.com/blog/web-page-font-settings-did-you-know.html
When I was working on a project before, I set { } and other similar fonts according to the gourd painting. However, when more devices and systems appeared, the previous settings could no longer meet the display requirements of the webpage on each device.
Take the simplest Song typeface (simsun) as an example. It is a relatively easy-to-read font displayed under Windows, but it is almost impossible to see it directly on Mac. The following figure shows a comparison effect of the page before and after optimization:
Therefore, for various reasons, I had to do a corresponding understanding of fonts.
For website font settings, this article gives the following advice:
Mobile project:
PC terminal (including Mac) project:
Mobile and PC projects:
First of all, let’s talk about the types of fonts. Fonts are divided into five types, but the support of each device is also different. For example,
The support of each mobile device system:
| Five types of fonts | Android 4.0 | IOS6.0 | WP8 |
| sans-serif | Support< /td> | Support | Support |
| serif (serif) | support | support | support |
| monospace (equal width) | Support< /td> | Support | Support |
| fantasy | not supported | supported | not supported | cuisive (grass) | Not supported | Not supported | Not supported |
Of course, at present, this is only the support of various systems on mobile devices, but the support of browsers on PCs is also different, such as:
| Five types of fonts | IE series | Chrome | Firefox< /td> |
| sans-serif | Support | Not supported | Not supported |
| serif (serif) | < td >SupportSupport | Support | |
| monospace (equal width) | Support | Support | Support |
| fantasy | Support | Support | Support |
| cuisive (grass) | Not supported | Not supported | Not supported | < /tr>
The following describes the default fonts and commonly used fonts for the next system:
| system | Default Western font | Default Chinese font | Other common Western fonts | Other common Chinese fonts |
| Windows | Arial | Arial | Tahoma, Arial, Verdana, Georgia | Microsoft Yahei, Heiti | < /tr>
| Android 4.0 and below | Droid Sans | Droid Sans Fallback | Arial | No Arial, no Microsoft Yahei |
| Android 4.0 and above | Roboto | Roboto | Arial | No Arial , No Microsoft Yahei |
| iOS | Helvetica Neue | Heiti SC (Heiti) | Tahoma(v7.0), Arial, Verdana, Georgia | STHeiti(v7.0),None Arial, no Microsoft Yahei |
| Mac OS X below 10.6 | Helvetica Neue< /td> | STHeiti (Chinese black body) | Tahoma, Arial, Verdana, Georgia | Arial, No Microsoft Yahei | < /tr>
| Mac OS X 10.6 and above | Helvetica Neue | Hiragino Sans GB (holly black body Simplified Chinese ) | Tahoma, Arial, Verdana, Georgia | Arial, No Microsoft Yahei |
Reference materials: iOS6 font list, iOS7 font list, Mac OS X 10.6 font list, Mac OS X 10.7 font list, etc. After reading some materials, I have a basic understanding of the fonts under the system and browser.
Many students may think of the conclusions in the above tables: you can only set Western fonts but not Chinese fonts.
Is it possible to only set the Western font and not the Chinese font? The answer is of course no. Because the default fonts of the above systems and browsers are only ideal settings, these default fonts are limited to the initial default fonts of the browser or system. All current mobile phones support font replacement, and the same is true for browsers. Current browsers support users to set fonts by themselves. Therefore, it is dangerous to only set Western fonts while ignoring Chinese font settings.
For the various font apps of the current Adroid system, such as: font manager, font management, etc. If the user downloads the relevant app font software to change the font, what should we do in this case?
If the user replaces the default system characters, then we can only use other Chinese fonts to replace the reality. However, for now, there are very few Chinese fonts on the mobile terminal (almost unique), so I have not found a corresponding one. The solution will be found later and shared.
This article belongs to the CSS category of "Front End Encyclopedia".
Reply CSS See more CSS technical dry goods.
【Today's WeChat official account recommendation ↓】
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Do%20you%20understand%20web%20font%20settings.html
支付宝扫一扫 
评论列表（196条）
测试