CSS font 语法
在 CSS 中，font 是一个复合属性，它是以下属性的简写。
语法：
font: stretch style variant weight size/line-height family;说明：
font 的取值并不一定都要把所有子属性值都要写上，因为不写上的就表示使用对应子属性的默认值。但是 font 值的书写需要遵循一定的顺序，否则可能会无效。
对于 font 属性的使用，需要注意以下几点。
- font 属性必须包含：font-size、font-family，否则整个 font 声明无效。
- font 属性可以选择包含：font-stretch、font-style、font-variant、font-weight、line-height。
- font-stretch 只能是关键字，而不能是百分比。
- font-style、font-variant、font-weight 和 font-stretch 必须写在 font-size 之前，但它们彼此之间的顺序是自由的。
- font-variant 只能指定 CSS 2.1 中定义的值，也就是 normal 和 small-caps。
- line-height 必须紧跟 font-size 之后，前面是 “/”，比如 “20px / 1.5em”。如果没有设置 font-size，则可以是 “1.5em”。
提示: font 属性的使用比较复杂，限制非常多。在实际开发中，并不推荐使用 font 这个复合属性，而是推荐使用单独的子属性，这样会简单非常多。
CSS font 摘要
| 属于 | CSS 字体属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | 使用子属性的默认值 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS font 示例
接下来，我们通过一个简单的例子来讲解一下 CSS font 属性是如何使用的。
示例：font 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
font: italic bold 20px/1.2em Consolas sans-serif;
}
</style>
</head>
<body>
<div>绿叶网（lvyenet）</div>
</body>
</html>页面效果如下图所示。
分析：
font: italic bold 20px/1.2em Consolas sans-serif;上面这一句代码等价于：
font-style: italic;
font-weight: bold;
font-size: 20px;
line-height: 1.2em;
font-family: Consolas sans-serif;由于这里省略了 font-stretch 和 font-variant 这 2 个属性的设置，也就是此时 font-stretch 使用其默认值 “normal”，而 font-variant 使用其默认值 “normal”。总而言之，如果 font 属性的取值省略了某个子属性的值，就表示使用该子属性的默认值。
使用 font 属性有一个很大的弊端，就是书写其子属性值时需要严格按照顺序。对于上面例子来说，如果将 font 属性取值顺序打乱，比如改为：
font: 20px/1.2em italic bold Consolas sans-serif;再次运行后页面效果如下图所示，此时会发现 font 属性不再生效了。
此外，font 简写属性还有一个巨大的 “坑”——它会重置所有未设置的属性为默认值。比如你在 body 设置了 line-height: 1.5;，然后在某个 div 写了 font: 16px Arial;（没写行高），那么这个 div 的行高会瞬间变回 normal（约 1.2），从而破坏全局布局。
