各平台的主流字體支持情況
各系統的默認字體和常用字體：
| 系統 | 默認西文字體 | 默認中文字體 | 其他常用西文字體 | 其他常用中文字體 |
| 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