"Go" thinking of using Fonts for mobile Web pages

Recall 2 years ago just started to contact the mobile phone project, received PSD manuscript, found that visual designers like to use Microsoft Ya Black as a Chinese font design, so I write the page when also defined font-family for Microsoft Ya Black, later sent to the line, the careful product manager found that the font is not Microsoft ya black, Asked to change immediately, I was stunned, but also with the product dispute.

Later learned that the mobile phone system iOS, Android, etc. is not supported Microsoft Ya Black font, in order to meet the needs of the product, to ensure the restoration of visual manuscript, mobile phone is how to define the Microsoft Ya black font it?

I believe you will think of @font-face defined as Microsoft Black font and placed on the Web server, when needed to be automatically downloaded

@font-face {    font-family: ' Microsoftyahei ';    Src:url (' Microsoftyahei.eot '); /* IE9 Compat Modes *    /Src:url (' Microsoftyahei.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 *             /url (' Microsoftyahei.woff ') format (' Woff '),/* Modern Browsers */             URL (' microsoftyahei.ttf ')  format (' TrueType '),/* Safari, Android, iOS */             URL (' Microsoftyahei.svg#microsoftyahei ') format (' SVG ');/* Legacy IOS */   }

About the use of @font-face, the desert of this "CSS3 @font-face" has a detailed introduction.

Although the problem of the black font has been solved, it also has the effect of consuming the user's traffic and causing a delay in the opening speed of the page.

Always feel bad, in order to persuade the product manager, find the three big mobile phone system font information:

iOS system

• The default Chinese font is Heiti SC
• The default English font is Helvetica
• The default digital font is Helveticaneue
• No Microsoft Ya-Black font

Android system

• The default Chinese font is Droidsansfallback
• The default English and digital fonts are droid Sans
• No Microsoft Ya-Black font

Winphone system

• Default Chinese font is Dengxian (founder and other line body)
• The default English and digital fonts are Segoe
• No Microsoft Ya-Black font

Attached: iOS7 Font list

and made a small test, for the test machine iphone 4s, samsung gt-n7000 android 2.3.6, HTC windows Phone 8.0 Three kinds of mobile phone default Chinese fonts and English fonts show:

We can see that three different Chinese fonts are sans serif fonts like Microsoft Jas, and there is no liner for a small reason, and no matter which font is used on the page, it is difficult to see the difference between them and the experience of the product has little effect.

For the differences between serif fonts and sans serif fonts, refer to:

Then, the use of the system default font to achieve the visual effect with the use of Microsoft Jas Black font No obvious difference , the pros and cons, and ultimately persuaded the product manager to abandon the use of Microsoft Ya Black idea.

Conclusion

• Each phone system has its own default font, and does not support Microsoft Black
• No need to define Chinese font for mobile phone without special requirement, use system default
• English fonts and digital fonts can be used Helvetica, three kinds of systems are supported

Code:

/* Code */body{font-family:helvetica for the mobile-defined font;}

A little thought, and if you have any questions, you are welcome to discuss with me.

"Go" thinking of using Fonts for mobile Web pages