移动端web app和页面开发使用什么字体?微软雅黑?

一直不清楚移动端web app和页面用的什么字体,只是觉得类似微软雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。

三大手机系统IOS、android、winphone支持的字体

ios 系统

  • 默认中文字体是Heiti SC
  • 默认英文字体是Helvetica
  • 默认数字字体是HelveticaNeue
  • 无微软雅黑字体

android 系统

  • 默认中文字体是Droidsansfallback
  • 默认英文和数字字体是Droid Sans
  • 无微软雅黑字体

winphone 系统

  • 默认中文字体是Dengxian(方正等线体)
  • 默认英文和数字字体是Segoe
  • 无微软雅黑字体

回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是在页面中定义:

font-family:微软雅黑

后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番。

移动端web app和页面开发使用什么字体?微软雅黑?

了解到的手机系统 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 */
   }

雅黑字体问题虽然解决了,但也带来了影响,一来消耗用户的流量,二来对页面的打开速度造成了延迟。

是做了个小测试,下图为三种系统手机中的默认中文字体和英文字体展现:

移动端web app和页面开发使用什么字体?微软雅黑?

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

有关衬线字体和无衬线字体的差别,参考下图:

移动端web app和页面开发使用什么字体?微软雅黑?

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

结论

  • 各个手机系统有自己的默认字体,且都不支持微软雅黑
  • 如无特殊需求,手机端无需定义中文字体,使用系统默认
  • 英文字体和数字字体可使用 Helvetica ,三种系统都支持

代码:

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

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3452.html

(3)
江山如画的头像江山如画管理团队
上一篇 2019年4月8日 下午3:23
下一篇 2019年4月10日 上午10:00

99%的人还看了以下文章

  • 网页制作实战项目六:中融宝企业网站制作

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 中融宝企业网站制作 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握表单及表单元素的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、表单制作 3 、HTML及CSS的使用 【上机难点】 1、网页布局 2、CSS的定义和使用 【…

    2018年5月17日 网页设计
    5.4K1
  • 设计网站主页必须遵循的5点基本原则

    一个好的网站是一个有效的销售工具,它能够吸引更多的网民的注意。就好像一篇好的文章或者广告,他必须首先引起读者的兴趣,然后引导他们去做出某种行为。因此,不能忽视网站主页面的重要性,否则,网站让浏览者会很快失去兴趣。这样的网站,有可能赢得很高的点击率,但却不能制造预期般的回应,更不用说让网民着迷,进入下一级页面了。 与此类似,一个成功的网站也有几点要素。下面是设…

    2019年2月21日 网页设计
    3.6K0
  • 做什么样的网站好,什么样的网站才能吸引用户?

    什么样的网站是好网站,做什么样的网站好?网站要以什么样的形式来吸引你的用户?

    2019年1月25日
    1.7K0
  • 从零开始做APP界面设计三:字体选择 字号及配色方案

    上一篇《从零开始做APP界面设计二:App界面设计尺寸》我们学习了app界面设计尺寸规范,今天中国网页设计给大家分享App界面设计中字体的选用、字号设置及配色方案。 App界面设计标准色: 背景用色、文字用色、图标用色 App界面设计标准字: IOS:中文使用苹方字体  英文和数字使用Helvetica Android:中文使用思源黑体 英文和数字使用Rob…

    2018年4月22日
    5.8K0
  • 网站图片、文件防盗链方法大全

    一般盗链分为文件盗链和图片盗链两种。如果您网站上的音乐、视频、flash、压缩包文件、图片等,被其它网站大量的复制、盗用,会对自己网站产生大量的无效流量并对网站服务器造成很大的压力,所以很多网站都会设置防盗链,防止别人盗用自己网站的图片、音视频或下载文件资源。 今天中国网页设计给大家分享网站图片、文件防盗链的方法,对网站站长有很大帮助。 1、Windows主…

    2018年2月26日
    3.3K0
  • 网页制作实战项目九:飘城旅行社(分步教程2)

    网页制作实战项目九:飘城旅行社(分步教程)精 在上一课中,我们学习了实战项目九-首页的制作,今天来实现其他主要页面:旅游资讯。 练习一:PC端固定布局 地址:http://www.125jz.com/wp-content/demo/20190113demo1.html  练习二:流体移动布局 地址:马上上线 练习三:兼容响应式布局 地址:马上上线 1.导航下…

    2019年1月22日
    5.4K0

发表回复

登录后才能评论