Web page font settings do you understand?

Source: Internet
Author: User

I used to do the project in accordance with the gourd drawing dipper set {font-family:arial, "Microsoft Yahei", simsun,sans-self;} and other similar fonts, however, when more devices and systems appear, Previous settings such as this have not been able to meet the needs of Web pages on each device.

For the simplest SimSun, the display in Windows is a relatively easy-to-read font, but on a Mac you can't look directly at it, such as a comparison of the pages before and after the optimization:

Source: Http://ued.ctrip.com/blog

So, for a variety of reasons, I was forced to make a corresponding understanding of the font.

For Web site font settings, this article gives the following comments:

Mobile-side projects:

Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;

PC-side (including Mac) projects:

Font-family:tahoma,arial, "Helvetica Neue", "Hiragino Sans GB", simsun,sans-self;

Mobile and PC-side projects:

Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", simsun,sans-self;

First of all, the type of font, the font is divided into five categories, but the support of each device is also different, such as,

Each mobile device system support situation:

Five major types of fonts Android 4.0 IOS6.0 WP8
Sans-serif (sans serif) Support Support Support
Serif (liner) Support Support Support
Monospace (equal width) Support Support Support
Fantasy (Dream) Not supported Support Not supported
Cuisive (Cursive) Not supported Not supported Not supported

Of course, this is only a mobile device system support, but the PC browser support is also different, such as:

support
Five Large class font chrome Firefox
support
serif (serif) support support
monospace (equal width) support support support
fantasy (Dream) /td> support support support
not supported not supported

The following describes the default font and common fonts for the next system:

System Default Latin Font Default Chinese font Other commonly used Latin fonts Other commonly used Chinese fonts
Windows Song Body Song Body Tahoma, Arial, Verdana, Georgia Microsoft Jas Black, blackbody
Android 4.0 or less Droid Sans Droid Sans Fallback Arial No arial, no Microsoft ya Black
Android 4.0 and above Roboto Roboto Arial No arial, no Microsoft ya Black
Ios Helvetica Neue Heiti SC (blackbody) Tahoma (v7.0), Arial, Verdana, Georgia Stheiti (v7.0), no song body, no Microsoft ya Black
Less than Mac OS X 10.6 Helvetica Neue Stheiti (Chinese blackbody) Tahoma, Arial, Verdana, Georgia Song body, no Microsoft ya Black
Mac OS X 10.6 and above Helvetica Neue Hiragino Sans GB (Holly Bold Simplified Chinese) Tahoma, Arial, Verdana, Georgia Song body, no Microsoft ya Black

References: iOS6 font list, iOS7 font list, Mac OS X 10.6 font list, Mac OS X 10.7 font list and so on, after reading some of the information, the system and browser fonts have a basic understanding.

Many students see the above table in the conclusions, it may be thought: You can only set the Latin font does not set the Chinese font.

Is it possible to set only Latin fonts without Chinese fonts? The answer is of course not. Because the default fonts for these systems and browsers above are also just an ideal setting, these default fonts are limited to the original default font of the browser or system. Today's phones support font replacement, as is the case with browsers, which now allow users to set their own fonts. Therefore, it is dangerous to only set the Latin font and ignore the Chinese font setting.

For the current adroid system of various font apps, such as: Font butler, font management. If the user downloads the relevant app font software to get rid of the font, in this case, what should we do?

If the user replaces the default system word, then we can only use other Chinese fonts instead of the reality, but for the time being, the Chinese fonts on the mobile side are very few (almost unique), so I have not found a corresponding solution, later find ways to share.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.