CSS的font属性是用于简写字体相关样式的复合属性，它可以一次性设置font-style、font-variant、font-weight、font-size、line-height、font-family等多个字体相关的子属性，相比单独设置每个子属性，能大幅减少代码冗余。
font属性的标准语法规则
font属性的完整语法格式如下，其中部分属性可以省略，但有严格的顺序要求：
/* 完整语法：font-style font-variant font-weight font-size/line-height font-family */ font: italic small-caps bold 16px/1.5 "Microsoft YaHei", sans-serif;
各个子属性的顺序不能任意调整，必须按照上述顺序来书写，否则样式可能无法正确生效。其中font-size和font-family是两个必须设置的值，缺少其中任意一个，整个font简写都会失效。
为什么font属性不能乱序
CSS解析器在解析font属性时，是按照固定的顺序去匹配对应的值的，如果打乱顺序，解析器会把值匹配到错误的属性上，导致样式异常。
必须按顺序的原因
- font-size和font-family的位置是固定的，font-size必须在font-family之前，且二者必须同时出现
- line-height如果要设置，必须和font-size写在一起，用斜杠分隔，不能单独放在其他位置
- font-style、font-variant、font-weight这三个属性都是可选值，且顺序固定，解析器会按顺序优先匹配这三个属性的值
错误顺序的示例
下面我们看一个顺序错误的font属性写法，观察它的效果：
/* 错误写法：把font-family放在了font-size前面 */
.error-font {
font: "Microsoft YaHei", sans-serif 16px bold;
}
/* 正确写法：按照规范顺序书写 */
.correct-font {
font: bold 16px "Microsoft YaHei", sans-serif;
}
上述错误写法中，解析器会把"Microsoft YaHei", sans-serif识别为font-size的值，而16px会被识别为font-family的值，显然这两个值都不符合对应属性的要求，因此整个font简写会失效，元素会应用默认的字体样式。
特殊情况的说明
如果只设置font-size和font-family两个必须的属性，顺序正确即可，其他可选属性可以省略：
/* 只设置必须的两个属性，顺序正确即可生效 */
.simple-font {
font: 14px "PingFang SC", sans-serif;
}
如果要设置line-height，必须和font-size用斜杠拼接，且放在font-family之前：
/* 带line-height的正确写法 */
.line-height-font {
font: 16px/1.6 "Microsoft YaHei", sans-serif;
}
总结
CSS的font属性不能任意调整顺序，必须严格按照font-style、font-variant、font-weight、font-size/line-height、font-family的顺序来书写，其中font-size和font-family是必须设置的两个值。如果打乱顺序，CSS解析器无法正确匹配属性值，会导致整个font简写失效，元素应用默认字体样式。开发者在使用font简写时，只要记住固定顺序和必须属性，就能避免出现样式异常的问题。