『ANDROID』IOS、Android、WP移动平台浏览器下常用字体支持度研究

来源:互联网 发布:js canvas 动画库 编辑:程序博客网 时间:2024/06/05 05:55

原文地址:http://www.elonglau.com/119.html


做了近一年的无线项目,总觉得少了点什么,对,是总结和研究,一直在追随前人的脚步,在他人的经验中获取认知,恐怕做得越多只会觉得得过且过的感觉越深刻,最近终于有空闲的时间来做一些研究和总结了。

webapp风行了很久,但是最近一年才真正实际的应用起来,尤其是混合型的app开发深的企业的青睐,那么作为一名前端工程师,要做的事情就是要把移动端app以web的形式表现出来,自然字体是不可避免的因素,长久以来对三大移动平台的可用常用字体具体怎么定义和表现含糊不清,也出现了很多情况下无法向交互和视觉设计师们解释,故来做怎么一个研究和整理。

研究过程如下:

1. 确定目标范围。

   首先我们不是要研究移动端的设备具体可以支持什么字体,那样毫无意义,我们想要得到的是我们在WEB里常用的字体和类型在移动端的支持度和具体表现。

2. 整理出一份字体列表并创建测试页面。

   测试字体有五大类型:sans-serif(无衬线)、serif(线)、monospace(等宽)、 fantasy(梦幻)、cuisive(草体);

   常用的字体中无线字体有:Arial、Helvetica、Lucida Grande、Verdana、Tahoma、Trebuchet MS Normal;

   线字体有:Georgia、Times New Roman;

   中文字体有:Simsun(宋体)、Microsoft Yahei(微软雅黑)、Sim hei(黑体)、STXihei(华文细黑);

   外网测试地址链接:http://2.mcorp2.duapp.com/fonts.html

3. 搜集不同平台版本的移动设备,测试页面并截屏汇总结果。

4. 对比分析及填表,发现结论。

测试表格设置及数据结果如下:

分类字体安卓3.2 (同4.x)安卓4.xIOS5.x(同IOS6)IOS6.xIOS7.x (同IOS6)WP8.x

sans-serif(无线) 支持/独特 支持/独特 支持/同微软雅黑serif(线) 支持/独特 支持/独特 支持/独特monospace(等宽) 支持/独特 支持/独特 支持/独特fantasy(梦幻) 不支持 支持/独特 不支持cuisive(草体) 不支持 不支持 不支持

线

Arial 不支持/同Arial 支持/同Helvetica 支持Helvetica 不支持/同Arial 支持 不支持Lucida Grande 不支持/同Arial 支持/同Verdana 不支持Verdana 不支持/同Arial 支持 支持/同ThomaTahoma 不支持/同Arial 不支持 支持Trebuchet MS Normal 不支持/同Arial 支持 支持

线

Georgia 不支持/同Georgia 支持 支持Times New Roman 不支持/同Georgia 支持/同Georgia 支持

Simsun(宋体) 不支持/类黑体 不支持 支持Microsoft Yahei(微软雅黑) 不支持/类黑体 不支持 支持/默认字体Sim hei(黑体) 不支持/类黑体 不支持 支持STXihei(华文细黑) 不支持/类黑体 支持/默认中文字体 支持/同黑体

 

得出初步结论:

Android平台

 4.0之前安卓支持Dorid系列字体,Droid Sans(无线)、Droid Serif(线)、Droid Sans Mono(等宽),西文无线表现类似Arial,西文  线表现类似于Georgia,中文字体全部表现为类似黑体的线字体;

 4.0以后加入了无线字体Roboto,类似于Arial和Helvetica,更现代。  

 默认情况,西文都会以线字体渲染。

IOS平台 常见的西文字体支持较多,中文默认表现为华文细黑,西文默认表现为线字体(接近Georgia)。WP平台 wp平台对字体的支持更完全,默认中西文都为微软雅黑。最终安全字体 西文是Arial(安卓字形接近)、Trebuchet MS Normal(因字体特点较少使用),中文则要可以使用不同的黑体系列,无法统一

备注:此结论局限性较大,只针对常见WEB字体进行研究,只针对三大原生系统默认支持的字体,第三方定制的不再研究之列,时间精力有限如有纰漏,望不吝指正。

 

PS:附上本次测试所用的测试机型列表

设备型号操作系统版本小米M1Android4.1.2小米M1Android4.0.4三星Galaxy S3Android4.1.2三星Galaxy Tab7.7Android3.2iPhone4IOS5.1.1iTouch4IOS6.1.2iPhone5IOS7.0.4Nokia Lumia 920windowsphone8.0.2

 


0 0