網頁設計中字體預設樣式詳解
網頁設計中字體預設樣式詳解,從事過網頁設計的朋友都知道，我們使用的有些字體在一些流覽器裡面顯示不出來，不是我們想要的那種效果，我們應該怎麼辦呢？下麵就給大家做一個詳細的介紹，希望大家通過下麵的介多瞭解一點知識
流覽器預設的樣式往往在不同的流覽器、不同的語言版本甚至不同的系統版本都有不同的設置，這就導致如 果直接利用預設樣式的頁面在各個流覽器下顯示非常不一致，於是就有了類似YUI的reset之類用來儘量重寫流覽器的預設設置保證各個流覽器樣式一致性的做法。
拿字體來說，各個流覽器預設的字體種類、字體大小和字體行高都不一樣，比如IE8的中文版在Windows XP下顯示網頁時預設字體是宋體，而英文版肯定不會如此。所以我們需要統一設置網頁設計預設的字體樣式，以便實現一致的顯示效果來保證設計的一致性和提高開發效率。
樣式優先順序
通常使用者看到的頁面的樣式會受到三層控制:
* 第一層是流覽器的預設樣式
* 第二層是網頁定義樣式
* 第三層是使用者自訂樣式
和CSS一樣，後面的優先順序 高於前面的，也就是說網頁定義樣式可以覆蓋流覽器的預設樣式，而使用者自訂樣式優先順序最高。不過，當有 !important 時，網頁樣式可以覆蓋使用者自訂樣式。使用者!important > 網頁!important > 使用者 > 網頁 > 流覽器預設。
這是一個很不錯的選擇，但是你也會發現Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作為第一預設字體。所以從美觀和可讀性上來講arial應該是完全可以接受的。
3. 一般情況下設置font-family都會在最後設置通用字體族以保證其安全性，比如Google的設置為font-family:arial,sans-serif;，但是至少在非中文版的Win7下當編碼是GBK時，IE8會因sans-serif來渲染宋體，導致字體出現變形，這就網頁設計是為什麼淘寶需要在sans-serif前加上宋體而Google無需這樣做的原因。
4. 因為中文字體的選擇非常有限，所以目前所有的主流流覽器都設置使用宋體來顯示中文。Baidu的首頁和搜索結果頁使用font-family:arial;可以從側面說明這樣做的安全性。可能有人注意到Firefox中國版預設顯示的中文字體是微軟雅黑，這是因為謀智網路擅自修改了使用者自訂樣式，不允許網頁的樣式覆蓋流覽器設置的樣式。也是由於類似的情況，我們要彈性網頁設計設計網頁非常重要。
使用英文字體作為第一預設字體會導致的問題之一就是中英文以及符號混排時的對齊問題
1. 這是一個經驗值，不同的產品對這個值要求可能不同，但我們一般會設置最常用的為預設值。比如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設置其行高也為偶數能解決一些特殊情況下的字體對其問題。
2. 在IE6和IE7中，行高值必須大於字體的2px才能保證字體的完整顯示或當其作為連結時能有效顯示底線。
3. 設置line-height時，注意不要使用單位（包括%在內），因為子節點會繼承經過運算後的line-height值，所以當使用單位後流覽器會把line-height計算成第一次定義的絕對值，而不會隨著字體大小的變化而變化，而無單位的數值表示是所在容器的font-size的倍數，所以設置為無單位的數值是最佳選擇。
4. 深入CSS 行高非常有利於理解line-height，值得一讀。
性能和效率
1. 大部分平臺都有arial，減少流覽器的查找時間。
2. 代碼最少，書寫方便。arial基本上是名字最短的字體了，可以節約CSS的大小。
3. 所有的字母都小寫，目前Google就是這樣做的，好處是既可以編寫更快也能提升Gzip壓縮的效率。
4. 中文最好用unicode表示，比如使用宋體是，使用微軟雅黑是，這樣的好處是避免編碼問題，同時能得到所有的主流流覽器的支援。
5. 使用正確的字體種類寫法，避免使用引號，這樣可以縮小CSS的大小。中文字體可以按上一條方式來編寫。
未來
2. 雖然很早就有了，但是流覽器的支援、網速和商業問題，導致它很少被應用。最近關於字體的好消息是Firefox3.6將支援Web Open Font Forma。關於Web字體未來的相關資訊可以看Web 字體的未來、關於 Web 字體：現狀與未來和再談 Web 字體的現狀與未來。
|
