多终端WEB页面字体处理方法总结
来源:互联网 发布:广州城建职业学院网络 编辑:程序博客网 时间:2024/05/18 03:52
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 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 */ }
有关 @font-face 的使用,大漠的这篇《CSS3 @font-face》有详细的介绍。
雅黑字体问题虽然解决了,但也带来了影响,一来消耗用户的流量,二来对页面的打开速度造成了延迟。
总感觉不好,为了说服产品经理,找了三大手机系统的字体资料:
ios 系统
- 默认中文字体是STHeiti(苹果黑体)
- 默认英文字体是Helvetica
- 默认数字字体是HelveticaNeue
- 无微软雅黑字体
android 系统
- 默认中文字体是Droidsansfallback
- 默认英文和数字字体是Droid Sans
- 无微软雅黑字体
winphone 系统
- 默认中文字体是Dengxian(方正等线体)
- 默认英文和数字字体是Segoe
- 无微软雅黑字体
并做了个小测试,下图为测试机 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现:
我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体,有无衬线只是一个小原因,而无论页面中使用哪种字体,肉眼很难看出它们的差异,对产品的体验几乎没有影响。
有关衬线字体和无衬线字体的差别,参考下图:
那么,使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别,权衡利弊,最终说服了产品经理放弃使用微软雅黑的想法。
结论
- 各个手机系统有自己的默认字体,且都不支持微软雅黑
- 如无特殊需求,手机端无需定义中文字体,使用系统默认
- 英文字体和数字字体可使用 Helvetica ,三种系统都支持
代码:
/* 移动端定义字体的代码 */body{font-family:Helvetica;}
一点思考,如有疑问,欢迎大家和我讨论。
作者:白树
出处:http://peunzhang.cnblogs.com/
出处:http://peunzhang.cnblogs.com/
0 0
- 多终端WEB页面字体处理方法总结
- 多终端WEB页面字体处理方法总结
- 多终端WEB页面字体处理方法总结
- 怎么处理微信web页面字体自动变大
- web的字体处理
- WEB开发中的页面跳转方法总结
- WEB开发中的页面跳转方法总结
- WEB开发中的页面跳转方法总结
- Web页面的字体介绍
- Linux下终端字体颜色设置方法
- 页面方法+页面处理
- J2EE WEB程序页面出错信息的处理方法
- web页面处理流程
- jsp web页面处理
- 【web】页面缩放和滑动功能实现的方法总结
- 页面生命周期pr方法内部处理过程总结
- 移动web页面使用字体的思考
- 如何在web页面使用自定义字体
- javabean中get方法扩展
- 如何学习 cocos2d-x ?(非常不错的一篇文章)
- 心岸,留香
- [chromium][browser][idea][closed]把Android Browser导入Eclipse中运行调试
- C语言中动态的申请二(三)及多维数组的使用方法及释放方法
- 多终端WEB页面字体处理方法总结
- 庄表伟:谈谈大家是怎么玩Github的
- Insert Interval
- objective 字符串与c语言的串转化
- 电子邮件解惑之邮件传输协议(smtp)
- android开发 软键盘出现后 防止EditText控件遮挡 整体平移UI
- 【Leetcode】Letter Combinations of a Phone Number
- [C++]MySQL数据库操作实例
- IOS开发中UITableView和UITableViewCell的几种样式