移动端web页面使用字体的思考
来源:互联网 发布:手机准星瞄准软件 编辑:程序博客网 时间:2024/05/16 01:25
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动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/
- 移动web页面使用字体的思考
- 移动web页面使用字体的思考
- 移动web页面使用字体的思考
- 移动端web页面使用字体的思考
- 移动端web页面使用字体
- 移动端关于使用字体的思考
- 使用weinre调试移动端web页面
- 关于移动端web字体
- Web页面的字体介绍
- 在Web页面上使用字体的简单原则
- 用css3解决移动端页面自适应横屏竖屏的思考
- 移动web开发,ios字体使用
- 移动开发之页面字体的应用
- 如何在web页面使用自定义字体
- 移动端页面字体单位rem
- 移动端web页面使用position:fixed问题总结
- 移动端web页面使用position:fixed问题总结
- 手机移动端web默认字体
- Redis 创建集群
- C语言作业-advance7-1-排序
- GeoMesa安装
- 如何使重复数据就加不进
- 使用Gradle整合SpringBoot+Vue.js-开发调试与打包
- 移动端web页面使用字体的思考
- hdu 4614 Vases and Flowers(线段树+二分)
- 【网络】TCP服务器的实现
- ejs使用注意事项----js放ejs前面最好
- 3D\X20视差效果
- 2017西安交大ACM小学期 刷墙[折半枚举+异或]
- c++ 重载为返回值对象以及引用的情况
- 你不知道的javascript (中)
- 1