[Original] Thoughts on using fonts for mobile web pages_html/css_WEB-ITnose

I think back to when I first started working on mobile phone projects 2 years ago. After receiving the PSD draft, I found that visual designers like to use Microsoft Yahei as the Chinese font for design, so I also defined the font when writing the page. -family is Microsoft Yahei. Later, after it was posted online, the attentive product manager discovered that the font on the page was not Microsoft Yahei and asked to change it immediately. I was shocked and even argued with the product.

I later learned that mobile phone systems such as ios and android do not support Microsoft Yahei fonts. In order to meet the needs of the product and ensure the restoration of the visual draft, how does the mobile phone define Microsoft Yahei? What about black fonts?

I believe you will think that @font-face is defined as Microsoft Yahei font and stored on the web server, and is automatically downloaded when needed.

 @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 */   }

Related The use of @font-face is introduced in detail in this article "CSS3 @font-face" by Da Mo.

Although the Yahei font problem has been solved, it has also had an impact. Firstly, it consumes user traffic, and secondly, it causes a delay in the opening speed of the page.

I always feel bad. In order to convince the product manager, I found font information for the three major mobile phone systems:

ios system

The default Chinese font is STHeiti (Apple bold)

The default English font is Helvetica

The default digital font is HelveticaNeue

No Microsoft YaHeiti font

android system

The default Chinese font is Droidsansfallback (Chinese Chinese Song)

The default English and digital font is Droid Sans

No Microsoft Yahei font

winphone system

The default Chinese font is Dengxian (Founder isolinear font)

The default English and digital font is Segoe

No Microsoft Yahei font

And did a small test. The picture below shows the default Chinese fonts and English fonts in the three mobile phones: iPhone 4s, Samsung GT-N7000 android 2.3.6, and HTC windows Phone 8.0:

We can see that the three different Chinese fonts are sans-serif fonts like Microsoft Yahei. The presence of sans-serif is just a small reason, and no matter which font is used in the page, it is difficult to see with the naked eye. Their differences have little impact on the product experience.

For the difference between serif fonts and sans-serif fonts, refer to the picture below:

Then, The visual effect achieved by using the system default font is the same as There is no obvious difference in using Microsoft Yahei font . After weighing the pros and cons, the product manager was finally persuaded to give up the idea of ​​using Microsoft Yahei.

Conclusion

Each mobile phone system has its own default font, and none of them supports Microsoft Yahei

If there are no special needs, there is no need to define Chinese fonts on the mobile phone, use the system default

English fonts and digital fonts can use Helvetica, all three systems support

Code:

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

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