聊聊font-family的那些事
上週和後端同學聯調介面，我需要在頁面展示後端返回了一堆linux的輸出文字，樣式排版變形，慘不忍睹。
看到這個，我瞬間明白這是white-space預設值搞的鬼，順手就給設定成了white-space：pre。 可是問題解決了80%，空格是沒有自動合併了，但是還是沒有完全對其。
冥思苦想了一會，隨手敲了個font- ，想起來了好像是等寬字型的問題，於是設定font-family：monospace，總算看到想要的結果了，開開心心把bug單迴歸了。
今天就看看書，順便聊聊font-family相關的東西。
font-family，直面意思字型家族，所有font- 開頭的屬性都是和字型有關的。
一般我們會這樣設定：
body{ font-family：'PingFang SC', 'Microsoft Yahei'，sans-serif; }
其實，font-family可設的值除了具體的字型名還有很多，serif、sans-serif、monospace、cursive、fantasy、system-ui，常用的就是前三個，含義解釋分別是襯線字型、無襯線字型、等寬字型。
襯線字型，就是說筆畫開始結束的地方有額外的裝飾，而且筆畫的粗細不一樣，無襯線字型，就是沒有這些個裝飾，筆畫粗細一樣。
作業系統不同，內建的字型也會不同，windows常見的內建字型有
| 宋體 |
SimSun |
| 黑體 | SimHei |
| 微軟雅黑 | Microsoft YaHei |
| 微軟正黑體 | Microsoft JhengHei |
| 楷體 | KaiTi |
| 新宋體 | NSimSun |
| 仿宋 | FangSong |
其中，宋體就是屬於襯線字型，微軟雅黑就屬於無襯線字型。
OS 作業系統內建字型有：
| 蘋方 | PingFang SC |
| 華文黑體 | STHeiti |
| 華為楷體 | STKaiti |
| 華文宋體 | STSong |
| 華文仿宋 | STFangsong |
| 華文中宋 | STZhongsong |
等等，其中PingFang SC屬於無襯線字型。可以看出蘋果內建的字型有很多，這只是列舉了常用的中文字型。
當我們設定了 font-family：'PingFang SC', 'Microsoft Yahei'，sans-serif; 後，作業系統會從左往右在本地字型庫裡面尋找，如果有相應的字型則應用到web頁面。
等寬字型，一般中文字型都是等寬的，就是每個字元在font-seize相同的情況下佔據的寬度一樣，但是英文字元會出現問題，如iii 和 MMM ，同樣三個字元寬度明顯不一樣。
等寬字型在web中有什麼用呢？
1.有利於程式碼的呈現，一般編輯器或者web上需要呈現原始碼的字型都是等寬字型。
2.使用者體驗上，需要一眼就能看出輸入字元數是否一致時，或者類似我遇到的需要展示linux系統的輸出內容時。
好了，就先說這麼多。
參考張鑫旭的CSS世界。