ios、android 系统字体说明

后来了解到的手机系统 ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？

相信大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载

1 2 3 4 5 6 7 8 @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 */ }

雅黑字体问题虽然解决了，但也带来了影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。

总感觉不好，为了说服产品经理，找了三大手机系统的字体资料：

ios 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

附：ios7字体列表

并做了个小测试，下图为测试机 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0三种手机中的默认中文字体和英文字体展现：

我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体，有无衬线只是一个小原因，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。

有关衬线字体和无衬线字体的差别，参考下图：

那么，使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别，权衡利弊，最终说服了产品经理放弃使用微软雅黑的想法。

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用Helvetica ，三种系统都支持

代码：

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

ps:另外关于移动端的字体单位，rem是相当好用的，也给大家推荐一下，具体使用看这里：http://ued.taobao.org/blog/2013/05/rem-font-size/

结论

更多相关文章

随机推荐