font屬性知多少
font-family屬性值
font-family默認(rèn)值由操作系統(tǒng)和瀏覽器共同決定。支持兩類屬性值，一類是“字體名”，一類是“字體族”。其中，“字體名”就是使用字體對應(yīng)的名稱，如果字體包含空格，需要使用引號引起來。理論上，可以不區(qū)分大小寫，但是建議采用單詞首字母大寫的方式。如果有多個字體，瀏覽器會從左向右一次查找字體，找到便會停止，否則采用瀏覽器默認(rèn)字體。
body {
font-family: 'PingFang SC', 'Microsoft Yahei';
}
MDN上“字體族”分為很多類，含義如下：
- serif: 襯線字體。
- sans-serif: 無襯線字體。
- monospace: 等寬字體。
- cursive: 手寫字體。
- fantasy: 奇幻字體。
- system-ui: 系統(tǒng)UI字體。
其中，字體分為襯線字體和無襯線字體。襯線字體，就是筆畫開始、結(jié)束的地方有額外裝飾而且筆畫的粗細有所不同。常用中文襯線字體是“宋體(SimSun)”，常用英文襯線字體是Times New Roman。而無襯線字體就是沒有額外的裝飾，筆畫的粗細都差不多。中文"雅黑(Yahei)"，英文的Arial、Helivetica等都是無襯線字體。
等寬字體多用于英文字體，如果要實現(xiàn)根據(jù)輸入內(nèi)容逐字顯示到屏幕上，就可以采用等寬字體進行展示。其中，ch單位表示字符0(阿拉伯?dāng)?shù)字0)的寬度。
需要注意的是，一般serif和sans-serif要寫在最后，因為后面的字體會被忽略。
中文字體和英文名稱
Windows常見內(nèi)置中文字體
| 字體中文名 | 字體英文名 |
|---|---|
| 宋體 | SimSun |
| 黑體 | SimHei |
| 微軟雅黑 | Microsoft Yahei |
| 微軟正黑體 | Microsoft JhengHei |
| 楷體 | KaiTi |
| 新宋體 | NSimSun |
| 仿宋 | FangSong |
OS X 系統(tǒng)內(nèi)置中文字體
| 字體中文名 | 英文名 | 字體中文名 | 英文名 |
|---|---|---|---|
| 蘋方 | PingFang SC | 華文黑體 | STHeiti |
| 華文楷體 | STKaiti | 華文宋體 | STSong |
| 華文仿宋 | STFangsong | 華文中宋 | STZhongsong |
| 華文琥珀 | SThupo | 華文新魏 | STXinwei |
| 華文隸書 | STLiti | 華文行楷 | STXingkai |
| 冬青黑體簡 | Hiragino Sans GB | 蘭亭黑-簡 | Lantinghei SC |
| 翩翩體-簡 | Hanzipen SC | 手札體-簡 | Hannotate SC |
| 宋體-簡 | Songti SC | 娃娃體-簡 | Wawati SC |
| 魏碑-簡 | Weibei SC | 行楷-簡 | Xingkai SC |
| 雅痞-簡 | Yapi SC | 圓體-簡 | Yuanti SC |
不得不吐槽一句，mac上的華文字體是真的多啊！
需要注意的是，“宋體(SimSun)”和“宋體-簡(Songti SC)”不是同一個字體，字形也有所差異。可能你會發(fā)現(xiàn)"SC"出現(xiàn)了很多次，這個"SC"指的是“簡體”(simplified chinese),相對的，還有"TC"，指的是“繁體”(traditional chinese)。
最后，font-family也可以指定自定義字體，一般用于字體圖標(biāo)。在@font-face里指定相同的font-family并引入相應(yīng)字體(src:url(...))，就可以使用了。
font關(guān)鍵字
語法如下：
font:caption | icon | menu | message-box | small-caption | status-bar
如果使用關(guān)鍵字，等同于設(shè)置為OS下該部件對應(yīng)的字體，即直接使用系統(tǒng)字體。
各個關(guān)鍵字的含義如下。
- caption: 活動窗口標(biāo)題欄使用的字體。
- icon: 包含圖標(biāo)內(nèi)容所使用的字體，如所有文件夾名稱、文件名稱、磁盤名稱，甚至瀏覽器窗口標(biāo)題所使用的字體。
- menu: 菜單使用的字體，如文件夾菜單。
- message-box: 消息盒里面使用的字體。
- small-caption: 調(diào)色板標(biāo)題所使用的字體。
- status-bar: 窗體狀態(tài)欄使用的字體。
需要注意的是，使用關(guān)鍵字作為屬性值必須是獨立的，跟font屬性縮寫也不同。其實，font關(guān)鍵字屬性值也是一種縮寫，以Chrome 67為例：
由于不同系統(tǒng)的默認(rèn)字號是不同的，因此需要顯示的重置字號。IE8會忽略與font關(guān)鍵字同時聲明的font-size，因此需要這樣處理：
html {font: menu;}
body {font-size: 14px;}
html {font: small-caption;}
body {font-size: 14px;}
html {font: status-bar;}
body {font-size: 14px;}
引用上述聲明(三選一)就可以讓各個系統(tǒng)使用各自的字體。
