[转]移动端web页面使用字体的思考

一直不知道手机端用的什么字体，只是以为相似雅黑，直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。

前人已栽树，后人我就直接转来吧……

 

回想2年前刚开始接触手机项目，接到PSD稿后，发现视觉设计师们喜欢用微软雅黑做为中文字体进行设计，因而我写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，细心的产品经理发现页面的字体不是微软雅黑，要求立刻修改，我就惊呆了，还跟产品争执一番。

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

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

@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 */
   }

　　

有关 @font-face 的使用，大漠的这篇《CSS3 @font-face》有详细的介绍。

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

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

ios 系统

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

android 系统

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

winphone 系统

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

附：ios7字体列表

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

咱们能够看出三种不一样的中文字体和微软雅黑同样是无衬线字体，有无衬线只是一个小缘由，而不管页面中使用哪一种字体，肉眼很难看出它们的差别，对产品的体验几乎没有影响。

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

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

结论

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

代码：

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

　　

做者：白树

出处：http://peunzhang.cnblogs.com/

 

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