WEB基礎之：CSS字型
字型
1. 字體系列
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
- Serif 字型: 這些字型成比例，而且有上下短線。如果字型中的所有字元根據其不同大小有不同的寬度，則稱該字型是成比例的。例如，小寫 i 和小寫 m 的寬度就不同。上下短線是每個字元筆劃末端的裝飾，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線。Serif 字型的例子包括 Times、Georgia 和 New Century Schoolbook。
- Sans-serif 字型: 這些字型是成比例的，而且沒有上下短線。Sans-serif 字型的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
- Monospace 字型: Monospace 字型並不是成比例的。它們通常用於模擬打字機打出的文字、老式點陣印表機的輸出，甚至更老式的視訊顯示終端。採用這些字型，每個字元的寬度都必須完全相同，所以小寫的 i 和小寫的 m 有相同的寬度。這些字型可能有上下短線，也可能沒有。如果一個字型的字元寬度完全相同，則歸類為 Monospace 字型，而不論是否有上下短線。Monospace 字型的例子包括 Courier、Courier New 和 Andale Mono。
- Cursive 字型: 這些字型試圖模仿人的手寫體。通常，它們主要由曲線和 Serif 字型中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個小彎，或者完全由花體部分和小的彎曲部分組成。Cursive 字型的例子包括 Zapf Chancery、Author 和 Comic Sans。
- Fantasy 字型: 這些字型無法用任何特徵來定義，只有一點是確定的，那就是我們無法很容易地將其規劃到任何一種其他的字體系列當中。這樣的字型包括 Western、Woodblock 和 Klingon。
2. font-family使用字體系列
font-family 先確定多個字型的優先順序，然後用逗號將它們連起來：
p {font-family: "Times New Roman", "Microsoft New Tai Lue", Georgia, Serif, Arial;}
根據上面的列表。使用者代理會按所列的順序查詢這些字型，若所列所有字型都不可用，就會簡單地選擇一個可用的serif字型。
即：font-family 屬性的值是用於某個元素的字型族名稱一個優先順序列表。瀏覽器會呼叫按優先順序查詢後可識別的第一個字型名稱。
- 建議在所有font-family規則中都提供一個通用字體系列，在使用者代理無法提供與規則匹配的特定字型時，會選擇一個候選字型。
- font-family中使用引號：使用場景是當一個字型名中有一個或多個空格，或者字型名包含#或$之類的符號；
3. font-weight字型加粗
加粗的相對值必須要限制在絕對大小範圍內。
p {font-weight: normal;}
p {font-weight: bold;}
p {font-weight: 900;}
| 屬性值 | 描述 |
|---|---|
| normal | 預設值。定義標準的字元。 |
| bold | 定義粗體字元。 |
| bolder | 定義更粗的字元。 |
| lighter | 定義更細的字元。 |
| 100 200 300 400 500 600 700 800 900 | 定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。 |
| inherit | 規定應該從父元素繼承字型的粗細。 |
4. 字型大小
| 屬性值 | 描述 |
|---|---|
| xx-small x-small small medium large x-large xx-large | font-size有7個絕對大小值，從 xx-small 到 xx-large。 預設值：medium。 |
| smaller larger | 不同於加粗的相對值，相對大小不必限制在絕對大小範圍內。 因此一個字型的大小可以超過屬性值描述xx-small和xx-large的大小。 |
| length | 把 font-size 設定為一個固定的值。 |
| % | 基於父元素繼承的大小計算一個百分比值。 有時長度值em等價於百分數值，即確定字型大小時1em等於100% |
| inherit | 規定應該從父元素繼承字型尺寸。 |
- 使用 em 來設定字型大小
W3C 推薦使用 em 尺寸單位。避免在 Internet Explorer 中無法調整文字的問題。瀏覽器中預設的文字大小是 16 畫素。1em 等於當前的字型尺寸，那麼對於瀏覽器來說，1em 就等於 16 畫素。在設定字型大小時，em 的值會相對於父元素的字型大小改變。
可以使用下面這個公式將畫素轉換為 em：pixels/16=em
假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em
h2 {font-size:2.5em;} /* 40px/16=2.5em */
在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設定預設的 font-size 值：
body {font-size:100%;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
5. 字型風格和變形
5.1 font-style屬性
該屬性設定使用斜體、傾斜或正常字型。斜體字型通常定義為字體系列中的一個單獨的字型。理論上講，使用者代理可以根據正常字型計算一個斜體字型。
| 屬性值 | 描述 |
|---|---|
| normal | 預設值。瀏覽器顯示一個標準的字型樣式。 |
| italic | 瀏覽器會顯示一個斜體的字型樣式。 |
| oblique | 瀏覽器會顯示一個傾斜的字型樣式。 |
| inherit | 規定應該從父元素繼承字型樣式。 |
斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文字則是正常豎直文字的一個傾斜版本。
5.2 font-variant屬性
font-variant 屬性設定小型大寫字母的字型顯示文字，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字型的字母與其餘文字相比，其字型尺寸更小。
| 屬性值 | 描述 |
|---|---|
| normal | 預設值。瀏覽器會顯示一個標準的字型。 |
| small-caps | 瀏覽器會顯示小型大寫字母的字型。 |
| inherit | 規定應該從父元素繼承 font-variant 屬性的值。 |
6. 拉伸和調整字型
6.1 font-stretch拉伸字型
p {font-stretch: ultra-condensed;}
| 屬性值 | 描述 |
|---|---|
| normal | 預設值。把縮放比例設定為標準。 |
| wider | 把伸展比例設定為更進一步的伸展值；測試時不支援 |
| narrower | 把收縮比例設定為更進一步的收縮值；測試時不支援 |
| ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | 設定 font-family 的縮放比例。 “ultra-condensed” 是最寬的值 “ultra-expanded” 是最窄的值。 |
| inherit | 規定應該從父元素繼承font-stretch 屬性的值。 |
6.2. font-size-adjust 調整字型
| 屬性值 | 描述 |
|---|---|
| none | 預設。如果此字型不可用，則不保持此字型的 x-height。 |
| number | 定義字型的方面值比率。x-height與字元大小的比 可使用的公式： 宣告的font-size * （font-size-adjust 值 / 可用字型的方面值）= 調整後的font-size 舉例： font-size設定為10px ，Verdana字型x-height與字元大小的比值是0.58，而對於Times則是0.46，在使用Times代替Verdana字型的情況下，那麼替代字型的尺寸將是 10 * (0.58/0.46) = 12.6px。 |
7. font屬性
| 屬性值 | 描述 |
|---|---|
| font-style | 規定字型樣式。 |
| font-variant | 規定字型異體。 |
| font-weight | 規定字型粗細。 |
| font-size/line-height | 規定字型尺寸和行高。 |
| font-family | 規定字體系列。 |
| caption | 定義被標題控制元件（比如按鈕、下拉列表等）使用的字型。 |
| icon | 定義被圖示標記使用的字型。 |
| menu | 定義被下拉列表使用的字型。 |
| message-box | 定義被對話方塊使用的字型。 |
| small-caption | caption 字型的小型版本。 |
| status-bar | 定義被視窗狀態列使用的字型。 |
7.1 典型字型規則
p {font: italic 900 small-caps 30px Verdana, Helsinki, Arial, sans-serif;}
font的屬性值要以font-size在前，font-family在後，作為宣告中的最後兩個值，而且，font宣告中必須有這兩個值。
7.2 line-height增加行高
該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。可以作為對font-size值的一個補充，並用斜線(/)與之分隔。
body {font-size: 12px;}
p {font: bold italic 200%/1.2 Verdana, Helsinki, Arial, sans-serif;}