《Head first HTML與CSS 第二版》讀書筆記 第八章 文字樣式

一、font-family：

每一個font-family包含一組有共同特徵的字體。共有五個字體系列：

1. serif字體系列包含有襯線的字體。多用於新聞報紙的文字排版；
2. sans-serif字體系列包含沒有襯線的字體。與serif字體相比，它在計算機屏幕上更易識別；
3. monospace系列包含固定寬度的字符；
4. cursive系統包含相似手寫的字體；
5. fantasy系列包含有某種風格的裝飾字體。

能夠給font-family指定多個字體，用逗號分隔這些字體。最後一般放一個字體系列名，若是前面指定的字體依次都未找到，就使用瀏覽器默認的系列字體。

可使用Web字體向用戶提供一種字體。Web字體的標準格式是Woff，全稱是Web開發字體格式（Web open font format）。能夠把它們放在服務器上，或者使用一個託管服務，如Google的字體託管服務。@font-face規則定義Web字體，例如：

@font-face{
	font-family: "Emblema One";
	src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
	     url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff");
}

www.fontsquirrel.com提供了不少開源的字體。

 

二、font-size：

能夠按像素指定字體大小，實際上是告訴瀏覽器字母高度是多少像素；

能夠用百分比指定字體大小，百分比是相對於父元素的；

能夠用比例因子em指定字體大小，也是相對於父元素；

用關鍵字指定字體大寫：xx-small/x-small/small/medium/large/x-large/xx-large。相鄰大的比小的大20%，small通常是12px。

做者推薦的作法：

1. 用關鍵字指定body中的字體大小；
2. 使用em或百分比指定其餘元素的大小。

在大多數狀況下默認body字體大小是16px，<h1>是body的200%，<h2>150%，<h3>120%，<h4>100%，<h5>90%，<h6>60%。

若是爲body指定em或百分比，則是相對於默認大小的。

三、font-weight：

字體粗細：lighter/normal/bold/bolder，一般bolder和lighter肉眼看不出效果。

四、font-style：

italic——斜體，除文字傾斜外，還有文字的風格有些變化；

oblique——傾斜文字。

對大多數瀏覽器，兩個效果相同。

五、color

Web顏色按紅、綠、藍三個份量所佔數量給定。

（1）用名字指定顏色，不區分大小寫；

（2）用紅、綠、藍百分比或0~255的數：

background-color: rgb(80%, 40%, 0%);

background-color: rgb(204, 102, 0);

數字/255就是百分比。

（3）用十六進制碼指定顏色

每組兩位數字分別表明顏色的紅、綠、藍分享的0到255的數。

color屬性不只控制文本顏色，還控制邊框顏色（即控制元素前景色）。border-color單獨控制邊框顏色。

六、text-decoration：

none/underline/overline/line-through：

沒效果/下劃線/上劃線/刪除線。

若是對同一個元素的兩個不一樣規則中一個指定了上劃線，另外一個指定下劃線，它們不會疊加，若是想要疊加必須在同一規則中指定。

<del>元素標記要刪除的內容；

<ins>元素標記插入的內容。