各平台的主流字体支持情况
各系统的默认字体和常用字体:
系统 | 默认西文字体 | 默认中文字体 | 其他常用西文字体 | 其他常用中文字体 |
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 | 宋体、无微软雅黑 |
各移动设备系统支持情况:
五大类字体 | 安卓4.0 | IOS6.0 | WP8 |
sans-serif(无衬线) | 支持 | 支持 | 支持 |
serif(衬线) | 支持 | 支持 | 支持 |
monospace(等宽) | 支持 | 支持 | 支持 |
fantasy(梦幻) | 不支持 | 支持 | 不支持 |
cuisive(草体) | 不支持 | 不支持 | 不支持 |
当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:
五大类字体 | IE系列 | Chrome | Firefox |
sans-serif(无衬线) | 支持 | 不支持 | 不支持 |
serif(衬线) | 支持 | 支持 | 支持 |
monospace(等宽) | 支持 | 支持 | 支持 |
fantasy(梦幻) | 支持 | 支持 | 支持 |
cuisive(草体) | 不支持 | 不支持 | 不支持 |
上结论
废话就不做分析了,结合参考资料,给出我目前在用的font-family 代码吧,不一定最好,欢迎赐教。
下面非全局定义,而是针对特殊div 下的个性化定义:
1 2 3 4 5 6 7 8 |
/*微软雅黑*/ .yahei{font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif!important} /*宋体*/ .songti{font-family: "Helvetica Neue", Helvetica,"Songti SC", "SimSun", serif!important} /*楷体*/ .kaiti{font-family: "Helvetica Neue", Helvetica, "KaiTi", "楷体", "STKaiti", "华文楷体", serif!important} /*华文仿宋*/ .fangsong{font-family: "Times New Roman", "Helvetica Neue", Helvetica, "FangSong", "仿宋", "STFangSong", "华文仿宋", serif!important} |
如果是用于全局项目中,那么可能会有所不同,这里直接引用参考资料的代码:
1 2 3 4 5 6 |
/*移动端项目*/ 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; |
当然,如何排布font-family 根本是看需求是什么,这个仅仅是作为参考。
参考资料:
https://ruby-china.org/topics/14005
http://ued.ctrip.com/blog/?p=3589
http://typo.sofi.sh/
http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
转载 http://devework.com/font-family-chinese.html