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

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

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

我将个人一系列用于微信对接的页面字体所有都设置成font-family:“Microsoft YaHei”,结果惨不忍睹。尤为是在苹果手机上,数字和英文的字体那叫一个丑啊!因而开始上网处处翻解决方案,才知道原来是这样:chrome

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

ios 系统字体

  • 默认中文字体是Heiti SCspa

  • 默认英文字体是Helvetica调试

  • 默认数字字体是HelveticaNeueorm

  • 无微软雅黑字体开发

android 系统it

  • 默认中文字体是Droidsansfallback

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

  • 无微软雅黑字体

winphone 系统

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

  • 默认英文和数字字体是Segoe

  • 无微软雅黑字体

经过观察能够发现,这三种手机系统默认的字体,都是无衬线体,且都与微软雅黑相似,因此如无特殊要求,手机端无需定义中文字体,使用系统默认英文字体和数字字体均可使用Heletica,这种英文字体,三种系统都是支持的。

因而乎,我将CSS中设置的font-family:“Microsoft YaHei”通通去掉,只规定body{font-family:Heletica;}便可。虽然在chrome上调试的时候看起来字体很丑,可是放到手机上,字体就很OK啦!

相关文章
相关标签/搜索