【转】移动端web页面使用字体的思考

原作者：白树

原文地址：http://www.cnblogs.com/PeunZhang/p/3592096.html

转载理由：最近一次拿到设计的效果图时没有标识字体，程序问使用什么字体时我随口说了句使用微软雅黑，因为个人偏好微软雅黑，觉得这种字体看着最舒服。因为程序是新人，倒也没有任何反驳。说完过了两天，我就看到这篇文章了，然后我去查看了下ios和andriod的默认字体，确实没有看到微软雅黑。这篇文章也可以给和我一样偏好微软雅黑的产品予以借鉴。

回想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.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现：

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

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

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

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑

如无特殊需求，手机端无需定义中文字体，使用系统默认

英文字体和数字字体可使用 Helvetica ，三种系统都支持

代码：

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

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