還是網(wǎng)頁字體這事
網(wǎng)站中常用見的字體就是“宋體”。但現(xiàn)在很多電子商務(wù)網(wǎng)站都會有標(biāo)價,這就涉及到了符號和數(shù)字,然后品牌和內(nèi)容中又會有英文和字母,這就又涉及到英文字體,光用“宋體”會不協(xié)調(diào)。因?yàn)椤八误w”本身是為中文字符設(shè)計(jì)的,符號、數(shù)字和英文、字母當(dāng)然也應(yīng)該使用英文字體來定義顯示才會更合適。
前幾天做一個項(xiàng)目我們決定使用font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋體),sans-serif的字體顯示順序(先別管合理不合理),我們測試了IE6/IE7/IE8/Firefox/chrome/(使用以上幾款瀏覽器訪問我們網(wǎng)站的用戶加起來占90%以上),在IE7/IE8瀏覽器中顯示英文和數(shù)字時字體有區(qū)別(見下圖)
“Aisleep”和“88”感覺上面有明顯的鋸齒而下面的感覺粗厚平滑一些。
大家知道,這是因?yàn)镮E7/IE8瀏覽器中[屬性] > [高級]選項(xiàng)卡 > [多媒體]有一個ClearType(
增強(qiáng)屏幕字體)屬性,默認(rèn)是被選中的原因(見下圖)。
如果把這個選項(xiàng)去掉勾,那IE7/IE8瀏覽器顯示的字體就和其它瀏覽器統(tǒng)一了。反之,通過Windows控制面板 >? ClearType Tuning 啟用ClearType(見下圖)
對于操作系統(tǒng)控制面板沒有ClearType Tuning選項(xiàng)的可以通過以下方式實(shí)現(xiàn):
-
- 單擊[開始],單擊[控制面板],單擊[外觀和主題], 然后單擊[顯示]。
- 在[外觀]選項(xiàng)卡上,單擊[效果]。
- 單擊選中[使用下列方式使屏幕字體的邊緣平滑]復(fù)選框,然后單擊該列表中的 ClearType[清晰]。
那以其它瀏覽器顯示的字體就會和IE7/IE8統(tǒng)一了。(注:據(jù)我調(diào)查大多數(shù)XP操作系統(tǒng)默認(rèn)為“標(biāo)準(zhǔn)”)
接下來會看到一些測試和整理,目的只是為了解字體在不同設(shè)置下的特性。這里不會有什么字體的推薦設(shè)置,因?yàn)槲艺J(rèn)為字體的設(shè)置和你所做項(xiàng)目的具體情況有關(guān),沒有什么設(shè)置是最好的,只要清楚字體在不同設(shè)置下的特性才能在以后的應(yīng)用中得心應(yīng)手。
測試:12px和14px的字體大小是中文網(wǎng)頁中最常見的;字體family:黑體,宋體,sans-serif,Verdana,Tahoma,Arial,Helvetica(沒用雅黑字體,雅黑字體在Vista以后的操作系統(tǒng)才有,但根據(jù)網(wǎng)站數(shù)據(jù)統(tǒng)計(jì)80%都是XP操作系統(tǒng),目前兼容性會是個問題);文字加粗容易分辨區(qū)別,
下圖顯示效果不好,這里訪問→http://docs.google.com/View?id=ds4hm4h_241f5cpdkff
瀏覽器:IE6/IE7/IE8/Firefox3.6/Chrome4.0。
整理:
從ClearType角度:除了IE7/IE8外其它瀏覽器字體顯示效果都是一樣的,如何統(tǒng)一所有字體顯示效果,方法上面已經(jīng)說過。
- 黑體:字體大小12px/14px時ClearType設(shè)置有作用(16px/18px/20px時無作用,22px以上會有作用);
- 宋體(\5b8b\4f53):字體大小12px/14px/16px/18px時ClearType設(shè)置無作用(20px以上會起作用),所以12px-18px之間的宋體在所有以上瀏覽器中能得到高度統(tǒng)一,但粗體的符號顯示真的很不理想比如”@”;
- sans-serif:無襯線字,細(xì)心的一定發(fā)現(xiàn)唯獨(dú)這類字體上圖中出現(xiàn)了三種字體。在IE6和IE7/IE8中區(qū)別只是ClearType設(shè)置問題,字體其實(shí)就是Tahoma(無襯字),但在FireFox和Chrome中調(diào)用的是宋體(襯字)(可設(shè)置);
- Verdana:ClearType設(shè)置會有作用,IE6/FireFox/Chrome中有明顯的鋸齒。
- Tahoma:ClearType設(shè)置會有作用,IE6/FireFox/Chrome中有明顯的鋸齒。(仔細(xì)觀察其實(shí)Verdana和Tahoma字體外形是差不多的,只是單詞中字母間距的區(qū)別。)關(guān)于Verdana和Tahoma再延伸一下,之前看到過根據(jù)Jackob Nielsen用戶調(diào)研顯示,Verdana 字體是易讀性最高的,推薦設(shè)置為第一默認(rèn)字體,前提那是英文站點(diǎn)。但在中文站點(diǎn)又要老生長談中英文排版問題,具體用什么字體要考慮文章中是否有斜體、粗體:
- 當(dāng)ClearType設(shè)置為“標(biāo)準(zhǔn)”時,Tahoma比Verdana鋸齒感強(qiáng),而且Verdana字母的間距較寬的優(yōu)勢會體現(xiàn)出來。
- 當(dāng)ClearType設(shè)置為“清晰”時,Verdana和Tahoma效果相近。
至于說Verdana由于字母間距的問題導(dǎo)致中文結(jié)合時效果不佳,各位有時間可以看看樣稿http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp,對平常的瀏覽和排版的影響是微乎的(Verdana的字體文章會更長一些),如果我不那么刻意去比,幾乎是看不出來的,何況是大多用戶(我做過測試把兩種字體的文章分開,分別給朋友、同事、家人等不是專業(yè)領(lǐng)域的人看,Ta們沒有任何意識,并且在我指出字體區(qū)別后,他們對我說:“你也太無聊了吧?”)。所以具體用什么字體時,最關(guān)鍵還是考慮字體用在什么對象(系統(tǒng)、訪問者)上,然后是字體是否會涉及到的變化:大小、斜體、粗體。
- 當(dāng)ClearType設(shè)置為“標(biāo)準(zhǔn)”時,Tahoma比Verdana鋸齒感強(qiáng),而且Verdana字母的間距較寬的優(yōu)勢會體現(xiàn)出來。
- Arial和Helvetica:以上瀏覽器中視覺上幾乎是一致的(IE7/IE8中感覺上顏色偏深一些),無鋸齒感覺,但和Verdana、Tahoma比起來整體偏小很多。可以把字體設(shè)置的大一些,CSS樣式中就會多一行特殊的定義。
參考:
- 使用 ClearType 增強(qiáng)屏幕字體http://support.microsoft.com/kb/306527/zh-cn
- 細(xì)說字體 Sans Serif 與 Serifhttp://yx.takeback.net/121/serif-font.html
- 無襯線體http://zh.wikipedia.org/wiki/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93
- 15.3 Font family: the ‘font-family’? propertyhttp://www.w3.org/TR/CSS21/fonts.html#propdef-font-family
- web-default-fonthttp://lifesinger.googlecode.com/svn/trunk/lab/2009/web-default-font.html
- 微軟雅黑http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91
來源:http://www.08show.com/blog/article.asp?id=337
- 目前還沒評論,等你發(fā)揮!