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

原创
2015/10/20 11:37
阅读数 1.1K

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

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

我将我的一系列用于微信对接的页面字体全部都设置成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啦!

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部