[转]移动端web页面使用字体的思考
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。
前人已栽树,后人我就直接转来吧……
回想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 系统
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/
ps:另外关于移动端的字体单位,rem是相当好用的,也给大家推荐一下,具体使用看这里:http://ued.taobao.org/blog/2013/05/rem-font-size/
[转]移动端web页面使用字体的思考的更多相关文章
- 【原】移动web页面使用字体的思考
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的 ...
- 【转】移动web页面使用字体的思考
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- 常见的移动端Web页面问题
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 移动端web页面开发常用的头部标签设置
在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- web页面引入字体
一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...
随机推荐
- 关于collapsed margin(外边距合并)
这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...
- OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
- MyBatis源码分析(1)-MapConfig文件的解析
1.简述 MyBatis是一个优秀的轻ORM框架,由最初的iBatis演化而来,可以方便的完成sql语句的输入输出到java对象之间的相互映射,典型的MyBatis使用的方式如下: String re ...
- berkeley db replica机制 - 主从同步
repmgr/repmgr_net.c, __repmgr_send(): 做send_broadcast, 然后根据policy 对DB_REP_PERMANENT的处理 __repmgr_send ...
- MVVM了解
了解WPF要有两年,零零碎碎也做了几个项目,之前面试的时候面试官必问对MVVM的了解. 其实不太了解,只是做项目的时候一直采用这种模式,Model-View-ViewModel.以下是我在了解过程中的 ...
- Win系统查看系统的几个命令
1. 查看显卡或者显存信息 Win + R dxdiag 2. 查看显卡是独立显卡,或者集成显卡 查看计算机显卡的方法 第一种方法:查看主机连接显示器VGA线连接的接口. 如图:VGA连接线连接在主机 ...
- JAVA学习博客---2015.5
上一次的学习博客写的和流水账差不多,有点生硬的和背目录一样,所以既然学习的目的是程序,那么这个月的学习博客就用程序来说点东西吧.这个月看了一些C和JAVA的视频,开始看别人写的程序,能看的懂但是自己去 ...
- Heroku空项目 Git本地Push代码错误 以及 Heroku Web启动错误
在Eclipse下建了一个"Blank Heroku App", 然后将自己写好的JS Web练习代码直接复制放到了这个空项目下, 由于Eclipse下的git工具不太会用, 导致 ...
- Oracle 删除大表中部分数据
需求: 项目中有一张表大概有7000多万条数据,造成表空间已满,需要清理部分数据,打算清理3000万. 2B 做法: delete from table_name where ID > '400 ...
- [MSSQL]如何高效查询表的总记录数
如何高效查询表的总记录数?[总结-整理-马克] 首先想到的自然是在表主键上应用COUNT函数来查询了,这个是目前使用最多的方法,没有之一 ) ROWS FROM product 这里再给出一些其它方法 ...