CSS字體處理中最復雜的部分是字體系列（font-family）匹配和字體加粗(font-weight)匹配，其次是字體大小(font-size)的計算。

一、 字體系列

相同的字體可能有很多不同的稱呼。例如，你可能對字體Times很熟悉，不過，Times實際上是多種變形的一個組合，包括TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldOblique等等。Times的每種變形都是一個具體的字體風格，而我們通常認為Times是所有這些變形的一個組合。換句話說，Times實際上是一個字體系列（font family），而不只是單個的字體，盡管我們大多數(shù)人都認為字體就是某一種字體。

除了各種字體系列外（如Times、Verdana、Helvetica或Arial），CSS還定義了5種通用字體系列。

Serif字體

這些字體成比例，而且有上下短線。如果字體中的所有字符根據(jù)其不同大小有不同的寬度，則稱該字體是成比例的。例如，小寫的i和小寫的m的寬度就不同。上下短線是每個字符筆劃末端的裝飾。如下圖所示：

Serif.png

Sans-serif字體

這些字體是成比例的，而且沒有上線短線。sans-serif字體的例子包括Helvetica、Geneva、Arial和Univers。

image.png

Monospace字體

Monospace字體不是成比例的，每個字符的寬度都完全相同，所以小寫的i與小寫的m有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個字體的字符寬度完全相同，則歸類為monospace字體，而不論是否有上下短線。monospace字體的例子包括Courier、Courier New和Andale Mono。

Fantasy字體

這些字體無法用任何特征來定義，只有一點是確定的，那就是我們無法很容易地將其劃歸為任何一種其他的字體系列當中。這樣的字體包括Western、Woodblock和Klingon。

二、幾種常見都中文字體

宋體

宋體是最常見都中文字體，如果沒有指定字體，操作系統(tǒng)往往選擇它來渲染。

微軟雅黑

微軟雅黑的美觀度和清晰度都較好，可以作為網(wǎng)頁都首選字體。它在Mac平臺對應字體是華文細黑（STXihei）。
但是，Windows XP沒有預裝這種字體，這時可以選擇黑體替代。不過黑體比較粗，不應用于字號較小都文字。

仿宋

這種字體是襯線體，比宋體都裝飾性更強。如果字號太小，會影響清晰度，所以只有在字號大于14px的情況下，才可以考慮這種字體。
它在Mac平臺的對應的字體是“華文仿宋(STFangsong)”。

楷體

楷體也是襯線體，裝飾性與仿宋體接近，但寬度更大，筆劃更清楚一些。這種字體也應該在大于14px的情況下使用。
它在Mac平臺的對應字體是“華文楷體(STKaiti)”

三、 字體的使用規(guī)則

使用通用字體系列

如果你希望文檔使用一種sans-serif字體，但是并不關(guān)心是哪一種具體字體，以下就是一個合適的聲明
body { font-family: sans-serif; }

指定字體系列

建議在所有font-family規(guī)則中都提供一個通用字體系列。這樣在用戶代理無法提供與規(guī)則匹配都特定字體時，就可以選擇一個候選字體。這種候補策略很有幫助，因為在一個跨平臺環(huán)境中，將無法知道誰安裝了什么字體。
h1 { font-family: Georgia, serif; }
由于中文字體一般都包含英文字母，中文字體中所包含的英文字母會代替指定的英文字體，所以應優(yōu)先指定英文字體，然后再指定中文字體，因為一般來說中文字體的英文字母不太優(yōu)美。

image.png

使用引號

只有當一個字體名中有一個或多個空格（如New York），或者如果字體名稱包括#或$之類當符號，才需要在font-family聲明中加引號。

如果沒有引號，盡管規(guī)則當余下部分還會得到處理，但用戶代理有可能忽略這個特定但字體名。
p { font-family: 'New Century Schoolbook', Times, serif; }

如果將一個通用名用引號引起，用戶代理就會認為你需要的是一個與此同名的特定字體，而不是一個通用字體系列

四、大型網(wǎng)站上的字體實踐

知乎選擇的字體
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif
谷歌香港
font-family: arial,sans-serif
蘋果官方網(wǎng)站（中國）
font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;

參考資料

《CSS權(quán)威指南（第三版）》
中文字體網(wǎng)頁開發(fā)指南
了解web中的字體之初體驗
在Web內(nèi)容中使用系統(tǒng)字體