CSS里font屬性的用法


CSS的語法說簡單也簡單——跟Java、Python這樣的編程語言比起來。但說復雜也復雜,因為它里面有很多的技巧可以研究。在css里有很多的屬性是復合屬性——可以拆分成多個屬性表示,我們通常將復合屬性稱作簡寫,比如今天要說的font屬性。

font: 13px/22px Arial, Helvetica, sans-serif;

上面的寫法就是一個復合寫法。中間有個斜杠的值是兩個值,分別表示字體的大小和行高,我們把上面的復合寫法拆解開,等效於下面的這段代碼:

font-size:13px; line-height:22px; font-family:Arial, Helvetica, sans-serif;

可以看出,簡寫的方式非常簡練,可以省去大量的繁瑣。使用CSS的簡寫方式是個好習慣,能夠大量的壓縮CSS文件的體積,減少帶寬的使用,加快網頁的加載速度。上面的例子並不是完整的font的復合寫法,它的完整的語法是這樣的:

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

看起來很嚇人吧,的確,我經常也不用復合寫法,主要原因是記不住它們的順序。對於記性好的朋友,復合寫法還是首選。

對於字體樣式,有一種古老的寫法,現在已經不推薦使用這種方式了:

這是正常大小.  這是<font size="+2">更大的</font> 。

使用<font>標記也能實現設置字體樣式的效果,上面的例子這“+2”的意思是”x-large”,字體增加20%,用標准的CSS表示,可以等效成下面:

這是正常大小.  這是<span style="font-size: x-large;">更大的</span> 。

這是正常大小.  這是<span style="font-size: 1.2em;">更大的</span> 。

這是正常大小.  這是<span style="font-size: 120%;">更大的</span> 。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM