[转]移动端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 系统

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

android 系统

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

winphone 系统

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

附：ios7字体列表

并做了个小测试，下图为测试机 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系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...

随机推荐

【转载】Dom篇
一. 初探Dom 1. Dom介绍二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. ...
ios UITableView 相关
1.tableView 实现的方法无分组的cell #pragma mark - Table view data source - (NSInteger)tableView:(UITableView ...
解决 Nginx 400 Bad Request 问题（WebSocket）
400 Bad Request 是一种 HTTP 错误状态码.HTTP/1.1 对 400 Bad Request的定义主要是: 语义有误,当前请求无法被服务器理解请求参数有误丢包导致异常 Goo ...
python之psutil模块详解（Linux）--小白博客
Python-psutil模块 windows系统监控实例,查询 https://www.cnblogs.com/zhou2019/p/10567282.html 1.简单介绍 psutil是一个跨平 ...
DataSet select 的使用
1) Select()——获取所有 System.Data.DataRow 对象的数组. 2) Select(string filterExpression)——按照主键顺序(如果没有主键,则按照添加 ...
R 语言安装
在linux下,对于手动安装的软件,当时间长了,我们就会忘记安装这个软件的细节.这就不利于以后软件的卸载工作了.而yum则会帮我们记住相关安装细节,当软件被卸载的时候,没用的文件也会一并被删除.因此, ...
linux kernel 源码安装
有时我们在安装系统后,发现没有安装当前系统的内核源码在/usr/src/kernels目录下,其实我们是少安装了一个rpm包: 当你配置好yum源后: yum install kernel-devel ...
IIS配置过程中的常见问题
解析Json需要设置Mime IIS6.0 1.打开IIS添加Mime项关联扩展名:*.json内容类型(MIME):application/x-JavaScript 2.添加映射: 位置 ...
border_mode
如果border_mode选择为same,那么卷积操作的输入和输出尺寸会保持一致.如果选择valid,那卷积过后,尺寸会变小 # apply a 3x3 convolution with 64 out ...
C++17尝鲜：编译期 if 语句
Constexpr If(编译期 if 语句) 以 if constexpr 打头的 if 语句被称为 Constexpr If. Constexpr If 是C++17所引入的新的语法特性.它为C+ ...

[转]移动端web页面使用字体的思考

结论

[转]移动端web页面使用字体的思考的更多相关文章

随机推荐

热门专题