以前做項目的時候就依葫蘆畫瓢的設定 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等類似的字型,然而當更多的裝置和系統出現後,以前這樣的設定已不能滿足網頁在各裝置上的顯示需求。
就拿最簡單的宋體(simsun)來說吧,在Windows系統下顯示是一個比較容易閱讀的字型,然而在Mac上簡直無法直視,如下圖給出一個優化前後頁面的對比效果:
出處:http://ued.ctrip.com/blog
以前做項目的時候就依葫蘆畫瓢的設定 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等類似的字型,然而當更多的裝置和系統出現後,以前這樣的設定已不能滿足網頁在各裝置上的顯示需求。
就拿最簡單的宋體(simsun)來說吧,在Windows系統下顯示是一個比較容易閱讀的字型,然而在Mac上簡直無法直視,如下圖給出一個優化前後頁面的對比效果:
出處:http://ued.ctrip.com/blog
是以,出于種種原因,促使我不得不去對字型做一個相應的了解。
對于網站字型設定,本文給出以下意見:
移動端項目:
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字型軟體将字型改掉,這種情況下,我們該如何處置?
如果使用者将預設的系統字替換掉,那我們就隻能用其他的中文字型來代替現實,然而就目前而言,移動端的中文字型非常少(幾乎是唯一性),是以,本人還沒有找到相應的解決辦法,後期找到方法再分享出來。