font属性知多少
font-family属性值
font-family默认值由操作系统和浏览器共同决定。支持两类属性值，一类是“字体名”，一类是“字体族”。其中，“字体名”就是使用字体对应的名称，如果字体包含空格，需要使用引号引起来。理论上，可以不区分大小写，但是建议采用单词首字母大写的方式。如果有多个字体，浏览器会从左向右一次查找字体，找到便会停止，否则采用浏览器默认字体。
body {
font-family: 'PingFang SC', 'Microsoft Yahei';
}
MDN上“字体族”分为很多类，含义如下：
- serif: 衬线字体。
- sans-serif: 无衬线字体。
- monospace: 等宽字体。
- cursive: 手写字体。
- fantasy: 奇幻字体。
- system-ui: 系统UI字体。
其中，字体分为衬线字体和无衬线字体。衬线字体，就是笔画开始、结束的地方有额外装饰而且笔画的粗细有所不同。常用中文衬线字体是“宋体(SimSun)”，常用英文衬线字体是Times New Roman。而无衬线字体就是没有额外的装饰，笔画的粗细都差不多。中文"雅黑(Yahei)"，英文的Arial、Helivetica等都是无衬线字体。
等宽字体多用于英文字体，如果要实现根据输入内容逐字显示到屏幕上，就可以采用等宽字体进行展示。其中，ch单位表示字符0(阿拉伯数字0)的宽度。
需要注意的是，一般serif和sans-serif要写在最后，因为后面的字体会被忽略。
中文字体和英文名称
Windows常见内置中文字体
| 字体中文名 | 字体英文名 |
|---|---|
| 宋体 | SimSun |
| 黑体 | SimHei |
| 微软雅黑 | Microsoft Yahei |
| 微软正黑体 | Microsoft JhengHei |
| 楷体 | KaiTi |
| 新宋体 | NSimSun |
| 仿宋 | FangSong |
OS X 系统内置中文字体
| 字体中文名 | 英文名 | 字体中文名 | 英文名 |
|---|---|---|---|
| 苹方 | 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)”不是同一个字体，字形也有所差异。可能你会发现"SC"出现了很多次，这个"SC"指的是“简体”(simplified chinese),相对的，还有"TC"，指的是“繁体”(traditional chinese)。
最后，font-family也可以指定自定义字体，一般用于字体图标。在@font-face里指定相同的font-family并引入相应字体(src:url(...))，就可以使用了。
font关键字
语法如下：
font:caption | icon | menu | message-box | small-caption | status-bar
如果使用关键字，等同于设置为OS下该部件对应的字体，即直接使用系统字体。
各个关键字的含义如下。
- caption: 活动窗口标题栏使用的字体。
- icon: 包含图标内容所使用的字体，如所有文件夹名称、文件名称、磁盘名称，甚至浏览器窗口标题所使用的字体。
- menu: 菜单使用的字体，如文件夹菜单。
- message-box: 消息盒里面使用的字体。
- small-caption: 调色板标题所使用的字体。
- status-bar: 窗体状态栏使用的字体。
需要注意的是，使用关键字作为属性值必须是独立的，跟font属性缩写也不同。其实，font关键字属性值也是一种缩写，以Chrome 67为例：
由于不同系统的默认字号是不同的，因此需要显示的重置字号。IE8会忽略与font关键字同时声明的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;}
引用上述声明(三选一)就可以让各个系统使用各自的字体。
