[Reprint] Page font settings do you understand?

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-se Rif (sans serif)	support
serif (liner Line)
monospa CE (equal width)	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:

Five major types of fonts	IE series	Chrome	Firefox
sans-se Rif (sans serif)	support		is not supported
serif (liner Line)
monospa CE (equal width)	support
fantasy (Dream)	support
Cuisive (Cursive)	Not supported	Not supported	Not supported

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

system	default Western font	default Chinese font	Other common Western fonts	Other common Chinese fonts
Windows				Microsoft Jas Black, blackbody
Android 4.0 The following	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		heiti SC (blackbody)	tahoma (v7.0), Arial, Verdana, Georgia	stheiti (v7.0), no arial, no Microsoft ya black
Mac OS X 10.6 The following	helvetica Neue	stheiti (Chinese blackbody)	tahoma, Arial, Verdana, Georgia	Arial, 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.