兼容PC手機端字體

各平臺的主流字體支持狀況

各系統的默認字體和經常使用字體：

系統	默認西文字體	默認中文字體	其餘經常使用西文字體	其餘經常使用中文字體
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