網頁字型樣式

標籤：

以前做項目的時候就依葫蘆畫瓢的設定 { 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字型軟體將字型改掉，這種情況下，我們該如何處置？

如果使用者將預設的系統字替換掉，那我們就只能用其他的中文字型來代替現實，然而就目前而言，移動端的中文字型非常少（幾乎是唯一性），因此，本人還沒有找到相應的解決辦法，後期找到方法再分享出來。

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

網頁字型樣式