驚!網(wǎng)頁字體設(shè)置你真的了解嗎?
以前做項(xiàng)目的時(shí)候就依葫蘆畫瓢的設(shè)置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等類似的字體,然而當(dāng)更多的設(shè)備和系統(tǒng)出現(xiàn)后,以前這樣的設(shè)置已不能滿足網(wǎng)頁在各設(shè)備上的顯示需求。
就拿最簡(jiǎn)單的宋體(simsun)來說吧,在Windows系統(tǒng)下顯示是一個(gè)比較容易閱讀的字體,然而在Mac上簡(jiǎn)直無法直視,如下圖給出一個(gè)優(yōu)化前后頁面的對(duì)比效果:
因此,出于種種原因,促使我不得不去對(duì)字體做一個(gè)相應(yīng)的了解。
對(duì)于網(wǎng)站字體設(shè)置,本文給出以下意見:
移動(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;
首先說說字體的種類,字體分為五大種類,然而各設(shè)備的支持情況也個(gè)不相同,如,
各移動(dòng)設(shè)備系統(tǒng)支持情況:
五大類字體 | 安卓4.0 | IOS6.0 | WP8 |
sans-serif(無襯線) | 支持 | 支持 | 支持 |
serif(襯線) | 支持 | 支持 | 支持 |
monospace(等寬) | 支持 | 支持 | 支持 |
fantasy(夢(mèng)幻) | 不支持 | 支持 | 不支持 |
cuisive(草體) | 不支持 | 不支持 | 不支持 |
當(dāng)然目前這只是移動(dòng)設(shè)備各系統(tǒng)的支持情況,然而pc端個(gè)瀏覽器的支持情況也各不相同,如:
五大類字體 | IE系列 | Chrome | Firefox |
sans-serif(無襯線) | 支持 | 不支持 | 不支持 |
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 | 無宋體、無微軟雅黑 |
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 (冬青黑體簡(jiǎn)體中文) | Tahoma、Arial、Verdana、Georgia | 宋體、無微軟雅黑 |
參考資料: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)字體。現(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)字替換掉,那我們就只能用其他的中文字體來代替現(xiàn)實(shí),然而就目前而言,移動(dòng)端的中文字體非常少(幾乎是唯一性),因此,本人還沒有找到相應(yīng)的解決辦法,后期找到方法再分享出來。
本文地址:http://irelandcustomcontracting.com/tutorial/di2952.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏