CSS教程:網(wǎng)頁字體的設置和控制

Div CSS網(wǎng)頁布局中對字體的控制是非常重要的,對于需要精確效果的頁面而言。這類設置會非常有用。對于一般用戶與開發(fā)者而論,使用瀏覽器默認字體即可,52CSS.com鮮有這方面的知識的介紹。此文分享了作者很獨特的CSS實踐經(jīng)驗。從此文可以看出。對頁面字體的控制與設置的 DivCSS網(wǎng)頁布局中對字體的控制是非常重要的,對于需要精確效果的頁面而言。這類設置會非常有用。對于一般用戶與開發(fā)者而論,使用瀏覽器默認字體即可,Webjx.com鮮有這方面的知識的介紹。此文分享了作者很獨特的CSS實踐經(jīng)驗。從此文可以看出。對頁面字體的控制與設置的思考,將CSS的工作進行的更加深入了。
body{font-family:Arial,sans-serif;}
這是我迄今發(fā)現(xiàn)的最好的全局字體解決方案。當然,所謂“最好”,也只是基于我個人的評判標準。所以我還是得分析一下其他的寫法有什么缺點,最后再總結這個寫法的特點。
body{font-family:"宋體",sans-serif;}
這個寫法可能的缺點在于:
1.宋體在Safari和Vista的IE7下,看起來很難看。(我稍后把截圖補上)
2.宋體的英文字很難看。
3.如果在CSS里寫中文,你得小心你HTML和CSS的編碼是否一致。
body{font-family:SimSun,sans-serif;}
這樣寫,可以避免上面的第三個問題。但是宋體本身確實很難看。我們希望在不同平臺下,都用各自默認的字體。XP是宋體,Vista是微軟雅黑,Mac是黑體。這樣的話,只能將字體的第一個設置為英文字體,這樣遇到中文的時候,瀏覽器會自動調用默認字體(VistaIE7的一些版本里貌似默認還是宋體,這個我就無能為力了,交給用戶設置的自主吧)
body{font-family:Tahoma,sans-serif;}
這是一個不錯的解決辦法。Tahoma其實是一個挺漂亮的字體(我同事喜歡稱它“大河馬”,哈哈)。但是它其實會帶來一些問題:
1.由Tahoma顯示的中文,在IE6里,下劃線會緊緊的貼住中文字,很難看。
2.IE6下,Tahoma無法.正確的設定為13px。它會跟14px一樣大。但是其他瀏覽器沒有這個問題。
3.如果一行里同時出現(xiàn)中文和英文,且這一行里有元素被定義了vertical-align屬性,在IE6、7里會導致文字高低不齊,甚至下劃線錯位。
body{font-family:Arial,ans-serif;}
上述兩個問題,Arial都沒有。但是Arial也有缺點:
1.比Tahoma難看。
2.Tahoma里的第三個問題也同樣存在。
不過,這個bug是有個解決辦法的,就是將這一行定義zoom:1。
所以,如果不嫌難看,定義為Arial是最合適的。如果實在不喜歡,可以將全局定義為Tahoma,然后再將有下劃線的(如鏈接)文字定義為Arial,至少可以緩解一下。
最后,對于全局字體,補充一點:
IE里,所有的表單元素都不繼承body的字體屬性,需要單獨設置:
input,label,select,option,textarea,button,fieldset,legend{
font-family:Tahoma,sans-serif;
}
相關文章
- 這篇文章主要介紹了css3 自定義字體font-face使用,需要的朋友可以參考下2014-05-14
CSS3用@font-face實現(xiàn)自定義英文字體
傳說中的CSS3基本上什么都可以,那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實現(xiàn)自定義英文字體,下面有個不錯的示例,感興趣的朋友可以了解下2013-09-23- 我們可以從表中看到在這里可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。2010-07-04
- 本文通過實例代碼給大家介紹了CSS定義字體、顏色、背景等屬性的相關知識,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-08-01