网页字体样式

之前作项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等相似的字体，然而当更多的设备和系统出现后，之前这样的设置已不能知足网页在各设备上的显示需求。

就拿最简单的宋体(simsun)来讲吧，在Windows系统下显示是一个比较容易阅读的字体，然而在Mac上简直没法直视，以下图给出一个优化先后页面的对比效果：

所以，出于种种缘由，促使我不得不去对字体作一个相应的了解。

对于网站字体设置，本文给出如下意见：

移动端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

 

pc端(含Mac)项目：

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

 

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

 

 

首先说说字体的种类，字体分为五大种类，然而各设备的支持状况也个不相同，如，

各移动设备系统支持状况：

五大类字体	安卓4.0	IOS6.0	WP8
sans-serif（无衬线）	支持	支持	支持
serif（衬线）	支持	支持	支持
monospace（等宽）	支持	支持	支持
fantasy（梦幻）	不支持	支持	不支持
cuisive（草体）	不支持	不支持	不支持

 

固然目前这只是移动设备各系统的支持状况，然而pc端个浏览器的支持状况也各不相同，如：

五大类字体	IE系列	Chrome	Firefox
sans-serif（无衬线）	支持	不支持	不支持
serif（衬线）	支持	支持	支持
monospace（等宽）	支持	支持	支持
fantasy（梦幻）	支持	支持	支持
cuisive（草体）	不支持	不支持	不支持

 

下面介绍下个系统的默认字体和经常使用字体：

系统	默认西文字体	默认中文字体	其余经常使用西文字体	其余经常使用中文字体
Windows	宋体	宋体	Tahoma、Arial、Verdana、Georgia	微软雅黑、黑体
Android 4.0如下	Droid Sans	Droid Sans Fallback	Arial	无宋体、无微软雅黑
Android 4.0及以上	Roboto	Roboto	Arial	无宋体、无微软雅黑
iOS	Helvetica Neue	Heiti SC (黑体)	Tahoma(v7.0)、Arial、Verdana、Georgia	STHeiti(v7.0)、无宋体、无微软雅黑
Mac OS X 10.6如下	Helvetica Neue	STHeiti (华文黑体)	Tahoma、Arial、Verdana、Georgia	宋体、无微软雅黑
Mac OS X 10.6及以上	Helvetica Neue	Hiragino Sans GB  (冬青黑体简体中文)	Tahoma、Arial、Verdana、Georgia	宋体、无微软雅黑

参考资料：iOS6字体列表、iOS7字体列表、Mac OS X  10.6字体列表、Mac OS X 10.7字体列表 等，在看了一些资料以后，对系统和浏览器下的字体就有了一个基本的认识。

有不少同窗看到上面这些表格里面的结论，可能就会想到：能够只设置西文字体不设置中文字体。

只设置西文字体不设置中文字体是否能够？答案固然是不能够。由于上面这些系统和浏览器的默认字体也仅仅是是一个理想状态下的设置，这些默认字体仅限于浏览器或系统最初的默认字体。如今的手机都支持字体更换，对于浏览器而已也是如此，如今的浏览器都支持用户本身设置字体。所以，只设置西文字体而忽略中文字体设置是存在必定的危险性的。

 

对于如今Adroid系统的各类字体app，如：字体管家、字体管理等。若是用户本身下载相关的app字体软件将字体改掉，这种状况下，咱们该如何处置？

若是用户将默认的系统字替换掉，那咱们就只能用其余的中文字体来代替现实，然而就目前而言，移动端的中文字体很是少（几乎是惟一性），所以，本人尚未找到相应的解决办法，后期找到方法再分享出来。

转载来自：携程设计委员会