Thinking about the fonts used in mobile Web pages

Objective

Remember to do the PC-side page, the font is generally set to Microsoft Ya Black, now do the mobile page, designers generally also set the font to Microsoft Ya Black font, but made out, when the test found that the font in the page is not Microsoft ya black, how to do?

Later learned that the mobile phone system iOS, Android and so on is not supported by Microsoft Ya Black font. In order to meet the needs of the product, to ensure the reduction of visual manuscript, mobile phone is how to define the Microsoft Ya black font?

@font the use of-face

@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.

Phone system default Font

The three major 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:

/**body{font-family:Helvetica;}

Reprint Address: http://www.cnblogs.com/PeunZhang/p/3592096.html

Thinking about the fonts used in mobile Web pages