移动web端开发字体设置问题，字体兼容性问题

摘要: 移动web端字体设置问题，字体兼容性问题

最近集中精力写了一系列移动端页面，遇到很多问题，也收获很多知识，以后我就会将问题的记录，和解决方案写到这里，给初涉移动端开发的小朋友看一下，也为自己记录下成长历程。

今天想说的是移动端字体的设置问题。

我将我的一系列用于微信对接的页面字体全部都设置成font-family：“Microsoft YaHei”，结果惨不忍睹。尤其是在苹果手机上，数字和英文的字体那叫一个丑啊！于是开始上网到处翻解决方案，才知道原来是这样：

目前市场的3大系统都不支持微软雅黑字体！

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

通过观察可以发现，这三种手机系统默认的字体，都是无衬线体，且都与微软雅黑类似，所以如无特殊要求，手机端无需定义中文字体，使用系统默认英文字体和数字字体都可使用Heletica，这种英文字体，三种系统都是支持的。

于是乎，我将CSS中设置的font-family：“Microsoft YaHei”统统去掉，只规定body{font-family：Heletica;}即可。虽然在chrome上调试的时候看起来字体很丑，但是放到手机上，字体就很OK啦！