通常用戶看到的頁(yè)面的樣式會(huì)受到三層控制,第一層是瀏覽器的默認(rèn)樣式,第二層是網(wǎng)頁(yè)定義樣式,第三層是用戶自定義樣式。和CSS一樣,后面的優(yōu)先級(jí)高于前面的,也就是說網(wǎng)頁(yè)定義樣式可以覆蓋瀏覽器的默認(rèn)樣式,而用戶自定義樣式優(yōu)先級(jí)最高。實(shí)際情況是雖然瀏覽器都或多或少提供了用戶自定義樣式的功能,但是極少數(shù)會(huì)有用戶去自定義,一般用也是高級(jí)用戶。而瀏覽器默認(rèn)的樣式往往在不同的瀏覽器、不同的語(yǔ)言版本甚至不同的系統(tǒng)版本都有不同的設(shè)置,這就導(dǎo)致如果直接利用默認(rèn)樣式的頁(yè)面在各個(gè)瀏覽器下顯示非常不一致,于是就有了類似YUI的reset之類用來盡量重寫瀏覽器的默認(rèn)設(shè)置保證各個(gè)瀏覽器樣式一致性的做法。
拿字體來說,各個(gè)瀏覽器默認(rèn)的字體種類、字體大小和字體行高都不一樣,比如IE8的中文版在Windows XP下顯示網(wǎng)頁(yè)時(shí)默認(rèn)字體是宋體,而英文版肯定不會(huì)如此。所以我們需要統(tǒng)一設(shè)置默認(rèn)的字體樣式,以便實(shí)現(xiàn)一致的顯示效果來保證設(shè)計(jì)的一致性和提高開發(fā)效率。
以后準(zhǔn)備使用如下默認(rèn)字體樣式:
body{ font: 12px/1.5 arial;}字體:arial
我們頁(yè)面的絕大部分內(nèi)容字符都是中文,毫無疑問目前為止在網(wǎng)頁(yè)上最常用也是最通用的顯示中文的字體是宋體,但是宋體在顯示英文、數(shù)字和英文符號(hào)時(shí)過于糟糕,比如©字符,所以我們一般期望通過CSS來實(shí)現(xiàn)用更好的字體樣式來顯示它們,然后用宋體來顯示中文和中文符號(hào)。之所以選擇arial是因?yàn)椋?/p>
Windows和Mac都預(yù)裝了這款字體,應(yīng)該是使用最廣泛的網(wǎng)頁(yè)字體了。它的潛在對(duì)手
tahoma和helvetica就沒有這么幸運(yùn)了。 視覺設(shè)計(jì)的專業(yè)人士可能會(huì)認(rèn)為在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘寶的默認(rèn)字體樣式是font: 12px/1 Tahoma, Helvetica, Arial, "/5b8b/4f53", sans-serif;這是一個(gè)很不錯(cuò)的選擇,但是你也會(huì)發(fā)現(xiàn)Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作為第一默認(rèn)字體。所以從美觀和可讀性上來講arial應(yīng)該是完全可以接受的。 一般情況下設(shè)置font-family都會(huì)在最后設(shè)置通用字體族以保證其安全性,比如Google的設(shè)置為font-family:arial,sans-serif;,但是至少在非中文版的Win7下當(dāng)編碼是GBK時(shí),IE8會(huì)因sans-serif來渲染宋體,導(dǎo)致字體出現(xiàn)變形,這就是為什么淘寶需要在sans-serif前加上宋體而Google無需這樣做的原因。 因?yàn)橹形淖煮w的選擇非常有限,所以目前所有的主流瀏覽器都設(shè)置使用宋體來顯示中文。Baidu的首頁(yè)和搜索結(jié)果頁(yè)使用font-family:arial;可以從側(cè)面說明這樣做的安全性。可能有人注意到Firefox中國(guó)版默認(rèn)顯示的中文字體是微軟雅黑,這是因?yàn)橹\智網(wǎng)絡(luò)擅自修改了用戶自定義樣式,不允許網(wǎng)頁(yè)的樣式覆蓋瀏覽器設(shè)置的樣式。也是由于類似的情況,我們要彈性設(shè)計(jì)網(wǎng)頁(yè)非常重要。
新聞熱點(diǎn)
疑難解答
圖片精選