Web page font style

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:

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:

Five major types of fonts	IE series	Chrome	Firefox
Sans-serif (sans serif)	Support	Not supported	Not supported
Serif (liner)	Support	Support	Support
Monospace (equal width)	Support	Support	Support
Fantasy (Dream)	Support	Support	Support
Cuisive (Cursive)	Not supported	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.

Reprinted from: Ctrip Design Committee

Web page font style