移动端关于使用字体的思考
程序员文章站
2024-03-15 20:08:36
...
说起字体,很常见的便是微软雅黑,宋体之类的了,现在设计师使用的频率也是挺高的,作为一个开发,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;}
上一篇: 对new的认识
下一篇: 深入理解Java并发编程之核心原理概念
推荐阅读
-
移动端关于使用字体的思考
-
CSS 中关于字体处理效果的思考
-
欢迎大家使用我用 adobe air 开发的饭否客户端“汤匙” 博客分类: 程序思考 AIRAdobeFlashLinuxCentOS
-
欢迎大家使用我用 adobe air 开发的饭否客户端“汤匙” 博客分类: 程序思考 AIRAdobeFlashLinuxCentOS
-
CSS 中关于字体处理效果的思考
-
分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例
-
移动开发中使用字体图标替换大量的ICON,提高效率
-
touch.js的使用--常见应用操作--移动端事件
-
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
-
clipboard.js使用方式在移动端遇到的问题解决