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

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

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.x	IOS5.x（同IOS6）	IOS6.x	IOS7.x （同IOS6）	WP8.x
五 大 类	sans-serif（无衬线）		支持/独特		支持/独特		支持/同微软雅黑
	serif（衬线）		支持/独特		支持/独特		支持/独特
	monospace（等宽）		支持/独特		支持/独特		支持/独特
	fantasy（梦幻）		不支持		支持/独特		不支持
	cuisive（草体）		不支持		不支持		不支持
无 衬 线	Arial		不支持/同Arial		支持/同Helvetica		支持
	Helvetica		不支持/同Arial		支持		不支持
	Lucida Grande		不支持/同Arial		支持/同Verdana		不支持
	Verdana		不支持/同Arial		支持		支持/同Thoma
	Tahoma		不支持/同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:附上本次测试所用的测试机型列表

设备型号	操作系统版本
小米M1	Android4.1.2
小米M1	Android4.0.4
三星Galaxy S3	Android4.1.2
三星Galaxy Tab7.7	Android3.2
iPhone4	IOS5.1.1
iTouch4	IOS6.1.2
iPhone5	IOS7.0.4
Nokia Lumia 920	windowsphone8.0.2

 

转载自CSS ARTIST-前端开发生活日志