網頁字體樣式

之前作項目的時候就依葫蘆畫瓢的設置 { 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字體軟件將字體改掉，這種狀況下，咱們該如何處置？

若是用戶將默認的系統字替換掉，那咱們就只能用其餘的中文字體來代替現實，然而就目前而言，移動端的中文字體很是少（幾乎是惟一性），所以，本人尚未找到相應的解決辦法，後期找到方法再分享出來。

轉載來自：攜程設計委員會