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

Posted Booo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端页面应该使用什么字体?相关的知识,希望对你有一定的参考价值。

 

 

设计师们通常喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义font-family为微软雅黑,后来发到线上后,发现页面的字体不是微软雅黑,后来了解到的手机系统 iosandroid 等是不支持微软雅黑字体,为了满足页面需要,保证视觉稿的还原度,手机端是如何定义微软雅黑字体呢?

相信大家会想到 @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 ,三种系统都支持。

以上是关于移动端页面应该使用什么字体?的主要内容,如果未能解决你的问题,请参考以下文章

h5页面在移动端需要注意的一些事情

pc端web、移动端web的字体大小、颜色、字体样式使用

pc和移动端页面字体设置

移动端应该如何动态设置字体大小?

移动端页面使用rem来做适配

h5页面可以在pc端展示么?还是只能在移动端(如微信上)展示啊?。。