移动端关于使用字体的思考

时间:2021-11-07 05:50:15

说起字体,很常见的便是微软雅黑,宋体之类的了,现在设计师使用的频率也是挺高的,作为一个开发,font-family就可以了,这是我最开始的想法,最近一段时间又大把的free time,把这以前(都是去年的了)就问题来简单的整理一下。

就刚才字体的问题,查了一下相关的资料,具体是这样的:
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 */ }

这样是解决了字体的问题。但是随之而来的是,打开速度过慢,消耗用户流量,这其实对于开发来说没有任何难度,只是引入字体的问题,主要还在用户体验这里,为了能和产品去很好的沟通,使得项目所有的细节区域最合理性。特意做了一个测试,比较有说服力的,
以下是: 安卓 ios, 系统字体的测试(微信测试)
移动端关于使用字体的思考
移动端关于使用字体的思考

移动端关于使用字体的思考

移动端关于使用字体的思考

由于没有找到winphone系统的手机,暂时先用着两种类型的测试,
从上面的图中可以看出,系统字体和微软雅黑的字体差别不是很大,都是无衬线体,不仔细看的话,很多情况下是看不出来的,使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别。
权衡利弊,如果没有特殊的需求,是可以放弃微软雅黑字体的。

总结

  • 不同的手机系统都有自己默认的字体,切目前不支持微软雅黑。
  • 如果没有特殊的要求,移动端无需定义字体,使用默认字体
  • 英文字体和数字字体可使用 Helvetica ,三种系统都支持

移动端定义字体

 body{font-family:Helvetica;}