一直不清楚移动端web app和页面用的什么字体，只是觉得类似微软雅黑，直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。
三大手机系统IOS、android、winphone支持的字体
ios 系统
- 默认中文字体是Heiti SC
- 默认英文字体是Helvetica
- 默认数字字体是HelveticaNeue
- 无微软雅黑字体
android 系统
- 默认中文字体是Droidsansfallback
- 默认英文和数字字体是Droid Sans
- 无微软雅黑字体
winphone 系统
- 默认中文字体是Dengxian(方正等线体)
- 默认英文和数字字体是Segoe
- 无微软雅黑字体
回想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 */
}
雅黑字体问题虽然解决了，但也带来了影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。
是做了个小测试，下图为三种系统手机中的默认中文字体和英文字体展现：
我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体，有无衬线只是一个小原因，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。
有关衬线字体和无衬线字体的差别，参考下图：
那么，使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别，权衡利弊，最终说服了产品经理放弃使用微软雅黑的想法。
结论
- 各个手机系统有自己的默认字体，且都不支持微软雅黑
- 如无特殊需求，手机端无需定义中文字体，使用系统默认
- 英文字体和数字字体可使用 Helvetica ，三种系统都支持
代码：
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3452.html
微信扫一扫 
支付宝扫一扫