瀏覽器對於網頁設計預設樣式的支援問題
通常訪客看到的頁面的樣式會受到三層控制,第一層是瀏覽器的預設樣式,第二層是網頁設計樣式,第三層是訪客自定義樣式。和CSS一樣,後面的優先順序高於前面的,也就是說網頁設計樣式可以覆蓋瀏覽器的預設樣式,而訪客自定義樣式優先順序最高。拿字體來說,各個瀏覽器預設的字體種類、字體大小和字體行高都不一樣。所以我們需要統一設置預設的字體樣式,以便實現一致的顯示效果來保證設計的一致性和提高開發效率。
瀏覽器預設的樣式往往在不同的瀏覽器、不同的語言版本甚至不同的系統版本都有不同的設置,這就導致如 果直接利用預設樣式的頁面在各個瀏覽器下顯示非常不一致,於是就有了類似YUI的reset之類用來儘量重寫瀏覽器的預設設置保證各個瀏覽器樣式一致性的做法。
拿字體來說,各個瀏覽器預設的字體種類、字體大小和字體行高都不一樣,比如IE8的中文版在Windows XP下顯示網頁時預設字體是宋體,而英文版肯定不會如此。所以我們需要統一設置預設的字體樣式,以便實現一致的顯示效果來保證設計的一致性和提高開發效率。
樣式優先順序
通常訪客看到的頁面的樣式會受到三層控制:
• 第一層是瀏覽器的預設樣式
• 第二層是網頁設計樣式
• 第三層是訪客自定義樣式
和CSS一樣,後面的優先順序 高於前面的,也就是說網頁設計樣式可以覆蓋瀏覽器的預設樣式,而訪客自定義樣式優先順序最高。不過,當有 !important 時,網頁樣式可以覆蓋訪客自定義樣式。訪客!important > 網頁!important > 訪客 > 網頁 > 瀏覽器預設。
字體:arial
我們頁面的絕大部分內容字元都是中文,毫無疑問目前為止在網頁上最常用也是最通用的顯示中文的字體是宋體,但是宋體在顯示英文、數位和英文符號時過於糟糕,比如©字元,所以我們一般期望通過CSS來實現用更好的字體樣式來顯示它們,然後用宋體來顯示中文和中文符號。之所以選擇arial是因為:
•Windows和Mac都預裝了這款字體,應該是使用最廣泛的網頁字體了。它的潛在對手 tahoma 和 helvetica 就沒有這麼幸運了。
• 視覺設計的專業人士可能會認為在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘寶的預設字體樣式是 font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
這是一個很不錯的選擇,但是你也會發現Google、YAHOO、Youtube、Bing甚至MSN的新版都使用 arial 作為第一預設字體。所以從美觀和可讀性上來講 arial 應該是完全可以接受的。
• 一般情況下設置font-family都會在最後設置通用字體族以保證其安全性,比如Google的設置為 font-family:arial,sans-serif; ,但是至少在非中文版的Win7下當編碼是GBK時,IE8會因 sans-serif 來渲染宋體,導致字體出現變形,這就是為什麼淘寶需要在 sans-serif 前加上宋體而Google無需這樣做的原因。
• 因為中文字體的選擇非常有限,所以目前所有的主流瀏覽器都設置使用宋體來顯示中文。Baidu的首頁和搜尋結果頁使用 font-family:arial; 可以從側面說明這樣做的安全性。可能有人注意到Firefox中國版預設顯示的中文字體是微軟雅黑,這是因為謀智網路擅自修改了訪客自定義樣式,不允許網頁的樣式覆蓋瀏覽器設置的樣式。也是由於類似的情況,我們要彈性設計網頁非常重要。
使用英文字體作為第一預設字體會導致的問題之一就是中英文以及符號混排時的對齊問題、通過設置行高和hasLayout能解決絕大部分情況,但是都不會很完美,如果把字體改成“宋體”能徹底的解決問題。很明顯,這個問題只出現在IE上。所以,如果你的網站很少使用英文、數位和英文符號,那麼直接設置 {font-family:\5b8b\4f53;} 也是很合理的選擇。
大小:12px
• 12px是宋體能顯示的極限,雖然微軟雅黑能顯示更小的字體,但目前的應用環境尚未成熟。由於宋體基本上是目前顯示中文唯一的通用Web字體,所以12px成為最常用的字體大小。我們當然可以依據產品的需要來修改這個預設值。
•不用考慮基於字體大小(em)的設計。
• 在Chrome3.0之後的中文版中,字體大小最小值是12px,比如你設置最小字體為10px,最後也變成12px。
行高:1.5倍
• 這是一個經驗值,不同的產品對這個值要求可能不同,但我們一般會設置最常用的為預設值。比如YUI的font中是 font:13px/1.231 arial,helvetica,clean,sans-serif; 即字體大小預設值是13px,行高是13*1.231=16.003px,預設的行高是預設字體的1.231倍。對於中文來說,常用的字體大小12px、14px、16px、18px等偶數大小,在IE6和IE7設置其行高也為偶數能解決一些特殊情況下的字體對其問題。
• 在IE6和IE7中,行高值必須大於字體的2px才能保證字體的完整顯示或當其作為鏈結時能有效顯示下劃線。
• 設置 line-height 時,注意不要使用單位(包括%在內),因為子節點會繼承經過運算後的line-height值,所以當使用單位後瀏覽器會把 line-height 計算成第一次定義的絕對值,而不會隨著字體大小的變化而變化,而無單位的數值表示是所在容器的 font-size 的倍數,所以設置為無單位的數值是最佳選擇。
•深入CSS 行高非常有利於理解 line-height ,值得一讀。
性能和效率
• 大部分平臺都有 arial ,減少瀏覽器的查找時間。
• 代碼最少,書寫方便。 arial 基本上是名字最短的字體了,可以節約CSS的大小。
• 所有的字母都小寫,目前Google就是這樣做的,好處是既可以編寫更快也能提升Gzip壓縮的效率。
•中文最好用unicode表示,比如使用宋體是 {font-family:\5b8b\4f53;} ,使用微軟雅黑是 {font-family:\5fae\8f6f\96c5\9ed1;} ,這樣的好處是避免編碼問題,同時能得到所有的主流瀏覽器的支援。
•使用正確的字體種類寫法,避免使用引號,這樣可以縮小CSS的大小。中文字體可以按上一條方式來編寫。
未來
• 通過對中英文及符號混排的測試, 我發現微軟雅黑其實表現相當不錯,包括英文數位和英文字元以及在IE6和IE7的顯示效果上,但唯一的遺憾是在XP下如果安裝了微軟雅黑字體的訪客沒有打 開“使用螢幕字體的邊緣平滑”選項的話,在firefox、Safari和Opera、特別是IE6下會非常模糊難以辨認。針對這個問題目前並沒有很好的 解決方案,所以只有等到IE6使用比率非常小的時候才可能正式的使用它。或許需要到2014年,XP死掉的時候。
• 雖然很早就有了@font-face,但是瀏覽器的支持、網速和商業問題,導致它很少被應用。最近關於字體的好消息是Firefox3.6將支持Web Open Font Forma。關於Web字體未來的相關資訊可以看Web 字體的未來、關於 Web 字體:現狀與未來和再談 Web 字體的現狀與未來。
轉貼來源:網頁設計博客
參考文獻:
李青蓉等編著.(1998).人機介面設計,台北縣:空大。
邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。
許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網站首頁為例,第六屆設計學術研究果研討會論文集。
相關文章
HTML網頁設計與XHTML網頁設計的差別簡單應用網頁設計編輯器操作智慧手機與網頁設計不同之處網頁設計與平面設計的差別網頁設計一些問題與技巧注重
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了