移动端页面应该使用什么字体？

Posted 2020-09-20 Booo

 

 

设计师们通常喜欢用微软雅黑作为中文字体进行设计，于是我写页面的时候也定义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 */
}

字体问题虽然解决了，但也带来了影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。总感觉不好，随后找了三大手机系统的字体资料：

ios 系统

• 默认中文字体是Heiti SC

• 默认英文字体是Helvetica

• 默认数字字体是HelveticaNeue

• 无微软雅黑字体

android 系统

• 默认中文字体是Droidsansfallback

• 默认英文和数字字体是Droid Sans

• 无微软雅黑字体

winphone 系统

• 默认中文字体是Dengxian(方正等线体)

• 默认英文和数字字体是Segoe

• 无微软雅黑字体

可以发现无论是ios、android还是wp系统中都是没有微软雅黑字体的，随后做了一个小测试，就是将微软雅黑字体的效果和各个系统默认字体的效果做了一下对比，发现无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。

结论：

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

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

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