CSS中字體樣式有很多種,其中包括字體復(fù)合樣式。字體復(fù)合樣式是指在一個(gè)CSS屬性值中同時(shí)包含多個(gè)字體屬性,用于系統(tǒng)默認(rèn)字體不可用的情況下,使頁面展示出更好的兼容性。例如:
font: bold 16px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;
上面這個(gè)例子中,font屬性包含了multiple values,也就是說同時(shí)設(shè)置了多個(gè)字體屬性:
- bold:文字加粗
- 16px:文字大小
- 1.5:文字行高
- 'Helvetica Neue',Helvetica,Arial,sans-serif:字體族
其中字體族是最為重要的一項(xiàng),它包括了多個(gè)備用字體,當(dāng)用戶瀏覽器中沒有第一個(gè)字體時(shí),將會依次嘗試使用后面的備用字體。
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
在這個(gè)例子中,字體族只設(shè)置了備用字體,因?yàn)樵谀承g覽器中,特定字體可能不存在。如果僅僅使用一個(gè)字體族,當(dāng)瀏覽器找不到該字體族中的任何一個(gè)字體時(shí),系統(tǒng)將采用默認(rèn)字體來替換。使用備用字體能夠避免這種情況。
字體復(fù)合樣式的好處在于使用復(fù)合樣式只需要寫一行代碼,而不是寫多段代碼。這樣可以使CSS代碼更加簡潔易讀。
除了font屬性外,還有其他復(fù)合樣式,例如:
background: url(images/bg.gif) no-repeat top left;
該代碼將背景圖片定義為位于images文件夾下的bg.gif文件,并設(shè)置不重復(fù)并位于左上角。這個(gè)例子中,也使用了多個(gè)屬性來定義背景樣式。
總之,CSS中的字體復(fù)合樣式可以使代碼更加易讀,同時(shí)避免了瀏覽器兼容性問題。我們應(yīng)該經(jīng)常使用復(fù)合樣式來提高CSS代碼的可讀性。