CSS字体简写属性顺序疑问：为何样式权重需置于尺寸之前？

CSS里font属性的简写规则，核心是为了避免语法歧义，同时符合排版逻辑和规范设计，具体原因如下：

• 区分必填项与可选项，避免解析混淆
  font-size和font-family是简写中的必填内容，而font-style、font-weight、font-variant是可选修饰项。把可选的修饰属性放在前面，浏览器能明确识别：一旦遇到带单位的数值（符合font-size的语法），就知道接下来的内容属于font-family（它允许包含空格，比如"Microsoft Yahei"）。如果反过来把font-size放在前面，浏览器无法区分后续的关键字（比如bold、italic）是修饰属性还是字体名称的一部分，会直接把这些内容归为font-family，导致样式失效。

  举个反例：如果允许font: 16px bold sans-serif，浏览器会把"bold sans-serif"整体识别为字体家族，而不是把bold解析为font-weight。但写成font: bold 16px sans-serif时，浏览器会先抓取bold作为字体粗细，再处理16px和sans-serif，完全符合预期。

• 利用语法特征简化解析逻辑
  font-style、font-weight的取值多是关键字（italic、bold）或纯数值（400、700），而font-size必须是带单位的数值（16px、1.2em），两者语法特征差异明显。把可选的关键字类属性放在前面，浏览器可以快速匹配这些修饰关键字，遇到带单位的数值时立刻切换到必填项的解析流程，减少解析复杂度和错误概率。

• 符合排版逻辑与规范历史
  早期排版系统习惯先设置字体的修饰属性（风格、粗细），再确定核心的字号和字体家族，CSS规范延续了这一逻辑，同时也符合开发者的直觉——先调整字体的细节样式，再敲定核心的大小和字体类型。

补充说明：font-style、font-weight、font-variant这三个可选属性之间的顺序可以任意互换，比如font: italic bold 16px sans-serif和font: bold italic 16px sans-serif都是有效的，浏览器能正确识别各自的属性值，但它们必须都出现在font-size之前。

内容的提问来源于stack exchange，提问作者Enas Mohamad