Recently, I concentrated on writing a series of mobile pages. I encountered many problems and gained a lot of knowledge. In the future, I will write the records of the problems and the solutions here for children who are new to mobile development. Document your own growth.
Today I want to talk about the setting of mobile fonts.
I set all of my series of page fonts for WeChat docking to font-family: " Microsoft YaHei ", and the result is terrible. Especially on Apple mobile phones, the fonts of numbers and English are ugly! So I started looking around for the solution on the Internet, only to know that it turned out to be like this:
At present, the three major systems in the market do not support Microsoft Yahei fonts!
ios system
The default Chinese font is Heiti SC
The default English font is Helvetica
The default number font is HelveticaNeue
No Microsoft Yahei font
android system
The default Chinese font is Droidsansfallback
The default English and numeric fonts are Droid Sans
No Microsoft Yahei font
winphone system
The default Chinese font is Dengxian (square isometric)
The default English and numeric font is Segoe
No Microsoft Yahei font
Through observation, it can be found that the default fonts of these three mobile phone systems are all sans-serif and are similar to Microsoft Yahei, so if there are no special requirements, there is no need to define Chinese fonts on the mobile phone, and the system default English fonts and digital fonts are used. Can use Heletica, this English font, three systems are supported.
So, I removed all the font-family: " Microsoft YaHei " set in CSS, and only specified body{ font-family: Heletica; }. Although the font looks ugly when debugging on chrome, but on the phone, the font is OK!