移動(dòng)和PC端網(wǎng)頁(yè)字體設(shè)置的入門(mén)知識(shí)

2014-07-17 09:06:28來(lái)源:攜程UED作者:破男孩

以前做項(xiàng)目的時(shí)候就依葫蘆畫(huà)瓢的設(shè)置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等類似的字體,然而當(dāng)更多的設(shè)備和系統(tǒng)出現(xiàn)后,以前這樣的設(shè)置已不能滿足網(wǎng)頁(yè)在各設(shè)備上的顯示需求。

以前做項(xiàng)目的時(shí)候就依葫蘆畫(huà)瓢的設(shè)置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等類似的字體,然而當(dāng)更多的設(shè)備和系統(tǒng)出現(xiàn)后,以前這樣的設(shè)置已不能滿足網(wǎng)頁(yè)在各設(shè)備上的顯示需求。

就拿最簡(jiǎn)單的宋體(simsun)來(lái)說(shuō)吧,在Windows系統(tǒng)下顯示是一個(gè)比較容易閱讀的字體,然而在Mac上簡(jiǎn)直無(wú)法直視,如下圖給出一個(gè)優(yōu)化前后頁(yè)面的對(duì)比效果:

字體優(yōu)化前后對(duì)比圖

因此,出于種種原因,促使我不得不去對(duì)字體做一個(gè)相應(yīng)的了解。

對(duì)于網(wǎng)站字體設(shè)置,本文給出以下意見(jiàn):

移動(dòng)端項(xiàng)目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

pc端(含Mac)項(xiàng)目:font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

移動(dòng)和pc端項(xiàng)目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

首先說(shuō)說(shuō)字體的種類,字體分為五大種類,然而各設(shè)備的支持情況也個(gè)不相同,如,

各移動(dòng)設(shè)備系統(tǒng)支持情況:

五大類字體 安卓4.0 IOS6.0 WP8
sans-serif(無(wú)襯線) 支持 支持 支持
serif(襯線) 支持 支持 支持
monospace(等寬) 支持 支持 支持
fantasy(夢(mèng)幻) 不支持 支持 不支持
cuisive(草體) 不支持 不支持 不支持

當(dāng)然目前這只是移動(dòng)設(shè)備各系統(tǒng)的支持情況,然而pc端個(gè)瀏覽器的支持情況也各不相同,如:

五大類字體 IE系列 Chrome Firefox
sans-serif(無(wú)襯線) 支持 不支持 不支持
serif(襯線) 支持 支持 支持
monospace(等寬) 支持 支持 支持
fantasy(夢(mèng)幻) 支持 支持 支持
cuisive(草體) 不支持 不支持 不支持

下面介紹下個(gè)系統(tǒng)的默認(rèn)字體和常用字體:

系統(tǒng) 默認(rèn)西文字體 默認(rèn)中文字體 其他常用西文字體 其他常用中文字體
Windows 宋體 宋體 Tahoma、Arial、Verdana、Georgia 微軟雅黑、黑體
Android 4.0以下 Droid Sans Droid Sans Fallback Arial 無(wú)宋體、無(wú)微軟雅黑
Android 4.0及以上 Roboto Roboto Arial 無(wú)宋體、無(wú)微軟雅黑
iOS Helvetica Neue Heiti SC (黑體) Tahoma(v7.0)、Arial、Verdana、Georgia STHeiti(v7.0)、無(wú)宋體、無(wú)微軟雅黑
Mac OS X 10.6以下 Helvetica Neue STHeiti (華文黑體) Tahoma、Arial、Verdana、Georgia 宋體、無(wú)微軟雅黑
Mac OS X 10.6及以上 Helvetica Neue Hiragino Sans GB  (冬青黑體簡(jiǎn)體中文) Tahoma、Arial、Verdana、Georgia 宋體、無(wú)微軟雅黑

參考資料:iOS6字體列表iOS7字體列表、Mac OS X  10.6字體列表、Mac OS X 10.7字體列表 等,在看了一些資料之后,對(duì)系統(tǒng)和瀏覽器下的字體就有了一個(gè)基本的認(rèn)識(shí)。

有很多同學(xué)看到上面這些表格里面的結(jié)論,可能就會(huì)想到:可以只設(shè)置西文字體不設(shè)置中文字體。

只設(shè)置西文字體不設(shè)置中文字體是否可以?答案當(dāng)然是不可以。因?yàn)樯厦孢@些系統(tǒng)和瀏覽器的默認(rèn)字體也僅僅是是一個(gè)理想狀態(tài)下的設(shè)置,這些默認(rèn)字體僅限于瀏覽器或系統(tǒng)最初的默認(rèn)字體,F(xiàn)在的手機(jī)都支持字體更換,對(duì)于瀏覽器而已也是如此,現(xiàn)在的瀏覽器都支持用戶自己設(shè)置字體。因此,只設(shè)置西文字體而忽略中文字體設(shè)置是存在一定的危險(xiǎn)性的。

對(duì)于現(xiàn)在Adroid系統(tǒng)的各種字體app,如:字體管家、字體管理等。如果用戶自己下載相關(guān)的app字體軟件將字體改掉,這種情況下,我們?cè)撊绾翁幹茫?/p>

如果用戶將默認(rèn)的系統(tǒng)字替換掉,那我們就只能用其他的中文字體來(lái)代替現(xiàn)實(shí),然而就目前而言,移動(dòng)端的中文字體非常少(幾乎是唯一性),因此,本人還沒(méi)有找到相應(yīng)的解決辦法,后期找到方法再分享出來(lái)。

關(guān)鍵詞:字體

贊助商鏈接: