移动web页面使用的字体的思考_html/css

前言

记得做PC端页面的时候，字体一般设置为微软雅黑，现在做起移动端页面来了，设计师们一般都还把字体设置为微软雅黑字体，但是做出来后，测试的时候发现页面中的字体不是微软雅黑，怎么办？

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

@font-face的使用

@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 系统

android 系统

winphone 系统

附：ios7字体列表

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

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

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

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

结论

代码：

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

转载地址：

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com