后来了解到的手机系统 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 系统
android 系统
winphone 系统
并做了个小测试，下图为测试机 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现：
我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体，有无衬线只是一个小原因，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。
有关衬线字体和无衬线字体的差别，参考下图：
那么，使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别，权衡利弊，最终说服了产品经理放弃使用微软雅黑的想法。
代码：
|
1
2
|
/*
移动端定义字体的代码 */body{font-family:Helvetica;} |
ps:另外关于移动端的字体单位，rem是相当好用的，也给大家推荐一下，具体使用看这里：http://ued.taobao.org/blog/2013/05/rem-font-size/
原文：http://blog.csdn.net/u013022210/article/details/51332270