字體系列
CSS定義了5中通用字體系列
Serif
Sans-serif
Monospace歇万，等寬字體
Cursive风罩，手寫體
-
Fantasy
理論上雳锋，用戶安裝的任何字體系列都會落入到上述通用系列之中夸浅。
<p style="font-family: serif;">我是serif字體</p> <p style="font-family: sans-serif;">我是sans-serif字體</p> <p style="font-family: monospace;">我是monospace字體</p> <p style="font-family: cursive;">我是cursive字體</p> <p style="font-family: Fantasy;">我是Fantasy字體</p>
使用font-family來指定字體冤荆。
例如: h1 {font-famliy: Georgia, serif;} 如果Georgia字體不可用踊沸，則會使用另外一種serif字體歇终。
建議在所有的font-famliy中都提供一個通用的字體系列
字體加粗
font-weight: normal(初始值) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit(可以繼承)
- font-weight 取值為數字
對于同一個字體會有很多不同的變形，這些變形使用相同的基本字體逼龟，但是每個變形都有不同的加粗评凝。例如：對于字體Zurich而言, Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light和Zurich Regular都是其不同的粗細的變形。
字體定義了9級加粗度腺律，分別為100~900奕短，100最細，900最粗匀钧。
這些數字都有某個常用的變形名等價翎碑，400定義為normal，700對于于bold之斯。
可能有多個數字日杈，對應了同一個變形。
下表中展示了Zurich的不同變形對應的數字
| 字體 | 指定的關鍵字 | 指定的數字 |
|---|---|---|
| Zurich Light | 100,200,300 | |
| Zurich Regular | normal | 400 |
| Zurich Medium | 500 | |
| Zurich Bold | bold | 600,700 |
| Zurich Black | 800 | |
| Zurich UltraBlack | 900 |
font-family: 'Zurich Light'
font-famly: 'Zurich'; font-weight: 100
font-famly: 'Zurich'; font-weight: 200
font-famly: 'Zurich'; font-weight: 300
以上四條規(guī)則使用的字體相同。
-
font-weight 取值為border或者lighter
如果將一個元素的加粗設置為border莉擒，瀏覽器會首先確定其父元素的font-weight的值酿炸，然后選擇下一個加粗級別中最小的加粗值，若不存在該字體涨冀，則設置為下一個更大的數字梁沧，直到該數字為900。
以上面Zurich字體為例：
p { font-weight: normal; } //400 p em { font-weight: border; } // 500p { font-weight: light; } //100 p em { font-weight: border; } // 400,如果該字體Lighter后面的字體都不存在蝇裤，則改值為 200lighter的做法一致廷支，只不過會導致加粗度下移而不是上移。
字體大小
font-size: xx-small | x-small | small | medium(初始值) | large | x-large | xx-large | smaller | lager | <length> | <percentage> (根據父元素的大小來計算)| inherit(可繼承)
font-size的作用是為給定字體的em框提供一個大小栓辜，而不能保證實際字符就是這種大小恋拍。實際字體大小之間的具體關系是由字體的設計者來確定的。
-
絕對大小
font-size有7個絕對大小的關鍵字 xx-small | x-small | small | medium(初始值) | large | x-large | xx-large 藕甩，但是這些關鍵字并沒有明確的定義施敢，而是相對定義的。根據css1規(guī)范狭莱，一個絕對大小與下一個絕對大小之間的差別（縮放因子）應當是向上1.5僵娃，向下0.66。但是不同的瀏覽器使用的縮放因子可能不同腋妙。
假設medium等于16px默怨，對于不同的縮放因子，得到下表中不同的絕對大小骤素。
關鍵字 縮放：1.5 縮放：1.2 xx-small 5px 9px x-small 7px 11px small 11px 13px medium 16px 16px large 24px 19px x-large 36px 23px xx-large 54px 28px -
相對大小
larger和smaller很簡單：使元素的大小相對于其父元素的大小在絕對大小梯度上上移或下移匙睹，使用計算絕對大小的縮放因子。
p { font-size: medium} // 16px
p em { font-size: larger} // 16*1.2
-
百分數
百分數總是根據從父元素繼承的大小來計算济竹。
-
繼承
font-size 是可以繼承的痕檬，但是繼承的是計算值而不是百分數。
例如：
p { font-size: 12px; } p em { font-size: 120%; } // 12*1.2 ≈ 14px(瀏覽器會對像素大小進行取整) p em strong { font-size: 135%; } // 14 * 1.35 ≈ 19px (而非 12*1.2*1.35)
字體風格
font-style: italic(斜體) | oblique(傾斜) | normal(正常送浊，初始值) | inherit(可繼承)
字體變形
font-variant: small-caps(小型大寫字母文本) | normal(初始值) | inherit(可繼承)
拉伸和調整字體
font-stretch: 讓一種字體的字符更胖或者更瘦
font-size-ajust: 當所用字體非創(chuàng)作人員首選時梦谜，仍然保證可以辨識
font-face
使用font-face可以在文檔中下載一個遠程字體來使用。
@font-face {
font-family: 'MyFont';
src: url(http://www.myfont.com/myfont.ps)
}
