DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 解析CSS設置默認字體樣式
解析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, ”5b8b4f53″, 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:5b8b4f53;}也是很合理的選擇。

大小: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:5b8b4f53;},使用微軟雅黑是{font-family:5fae8f6f96c59ed1;},這樣的好處是避免編碼問題,同時能得到所有的主流浏覽器的支持。

使用正確的字體種類寫法,避免使用引號,這樣可以縮小CSS的大小。中文字體可以按上一條方式來編寫。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved