CSS字體處理中最復雜的部分是字體系列（font-family）匹配和字體加粗(font-weight)匹配，其次是字體大小(font-size)的計算。
一、 字體系列
相同的字體可能有很多不同的稱呼。例如，你可能對字體Times很熟悉，不過，Times實際上是多種變形的一個組合，包括TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldOblique等等。Times的每種變形都是一個具體的字體風格，而我們通常認為Times是所有這些變形的一個組合。換句話說，Times實際上是一個字體系列（font family），而不只是單個的字體，盡管我們大多數人都認為字體就是某一種字體。
除了各種字體系列外（如Times、Verdana、Helvetica或Arial），CSS還定義了5種通用字體系列。
Serif字體
這些字體成比例，而且有上下短線。如果字體中的所有字符根據其不同大小有不同的寬度，則稱該字體是成比例的。例如，小寫的i和小寫的m的寬度就不同。上下短線是每個字符筆划末端的裝飾。如下圖所示：
Sans-serif字體
這些字體是成比例的，而且沒有上線短線。sans-serif字體的例子包括Helvetica、Geneva、Arial和Univers。
Monospace字體
Monospace字體不是成比例的，每個字符的寬度都完全相同，所以小寫的i與小寫的m有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個字體的字符寬度完全相同，則歸類為monospace字體，而不論是否有上下短線。monospace字體的例子包括Courier、Courier New和Andale Mono。
Fantasy字體
這些字體無法用任何特征來定義，只有一點是確定的，那就是我們無法很容易地將其划歸為任何一種其他的字體系列當中。這樣的字體包括Western、Woodblock和Klingon。
二、幾種常見都中文字體
宋體
宋體是最常見都中文字體，如果沒有指定字體，操作系統往往選擇它來渲染。
微軟雅黑
微軟雅黑的美觀度和清晰度都較好，可以作為網頁都首選字體。它在Mac平台對應字體是華文細黑（STXihei）。
但是，Windows XP沒有預裝這種字體，這時可以選擇黑體替代。不過黑體比較粗，不應用於字號較小都文字。
仿宋
這種字體是襯線體，比宋體都裝飾性更強。如果字號太小，會影響清晰度，所以只有在字號大於14px的情況下，才可以考慮這種字體。
它在Mac平台的對應的字體是“華文仿宋(STFangsong)”。
楷體
楷體也是襯線體，裝飾性與仿宋體接近，但寬度更大，筆划更清楚一些。這種字體也應該在大於14px的情況下使用。
它在Mac平台的對應字體是“華文楷體(STKaiti)”
三、 字體的使用規則
使用通用字體系列
如果你希望文檔使用一種sans-serif字體，但是並不關心是哪一種具體字體，以下就是一個合適的聲明
body { font-family: sans-serif; }
指定字體系列
建議在所有font-family規則中都提供一個通用字體系列。這樣在用戶代理無法提供與規則匹配都特定字體時，就可以選擇一個候選字體。這種候補策略很有幫助，因為在一個跨平台環境中，將無法知道誰安裝了什么字體。
h1 { font-family: Georgia, serif; }
由於中文字體一般都包含英文字母，中文字體中所包含的英文字母會代替指定的英文字體，所以應優先指定英文字體，然后再指定中文字體，因為一般來說中文字體的英文字母不太優美。
為了保證兼容性，中文字體的中文名稱和英文名稱，應該都寫入font-family
使用引號
只有當一個字體名中有一個或多個空格（如New York），或者如果字體名稱包括#或$之類當符號，才需要在font-family聲明中加引號。
如果沒有引號，盡管規則當余下部分還會得到處理，但用戶代理有可能忽略這個特定但字體名。
p { font-family: 'New Century Schoolbook', Times, serif; }
如果將一個通用名用引號引起，用戶代理就會認為你需要的是一個與此同名的特定字體，而不是一個通用字體系列
四、大型網站上的字體實踐
知乎選擇的字體
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif
谷歌香港
font-family: arial,sans-serif
蘋果官方網站（中國）
font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
技巧：
1.標示加粗字體的方法很多，例如，名為Zurich的字體系列有很多變形，如Zurich Bold、Zurich Black、 Zurich Light 和Zurich Regular，這些變形都使用相同的基本字體，但是每個變形都有不同的加粗。
如果你希望一個文檔
h1 { font-family: 'Zurich Bold', sans-serif; } h2 { font-family: 'Zurich Black', sans-serif; } h3, p { font-family: Zurich, sans-serif; } 只有當所有人都安裝了這些字體時，樣式表才能起作用，但更可能的情況是，大多數人都沒有安裝所有這些字體。更有意義的做法是為整個文檔指定一個字體系列，然后為不同元素指定不同的加粗。
加粗如何起作用
字體指定了9級：100~900
由於每個人的審美不一樣，鍾愛的字體也會有所有不同，這里給出我個人的常用寫法：
font-family: "HelveticaNeue",Helvetica,Arial, "PingFangSC", "HiraginoSansGB", "HeitiSC", "MicrosoftYaHei", "WenQuanYiMicroHei",sans-serif;
以及
font-family:"Open Sans", Arial, sans-serif;
另外推薦兩個github上的關於中文字體和排版的項目：
參考資料
《CSS權威指南（第三版）》
中文字體網頁開發指南
了解web中的字體之初體驗
在Web內容中使用系統字體
CSS Font知識整理總結
作者：瓦斯程序媛
鏈接：https://www.jianshu.com/p/73c2e93feb68