[Go] thinking of using fonts for mobile Web pages

Never know what font the phone uses, just feel like ya black, until one time the designer asked the design of mobile Web pages to use what font to seriously think of the problem.

The predecessors have trees, I will go directly to the future.

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

12345678

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

12	/* 移动端定义字体的代码 */body{font-family:Helvetica;}

　　

Gondor

Source: http://peunzhang.cnblogs.com/

PS: In addition, on the mobile side of the font units, REM is quite easy to use, but also to recommend to everyone, specifically used to see here: http://ued.taobao.org/blog/2013/05/rem-font-size/

Category: Knowledge of Mobile terminals

[Go] thinking of using fonts for mobile Web pages