css font 属性如何简写_字体属性组合规则解析

font简写必须包含font-size和font-family，缺一则整个声明被忽略；顺序固定为font: [style] [variant] [weight] [size]/[height] [family]；省略项将重置为初始值而非继承。

font 简写属性必须包含 font-size 和 font-family

缺一不可，否则整个 font 声明会被浏览器忽略。这是最容易踩的坑——很多人只写 font: bold 14px;，漏了字体族，结果样式完全不生效。

实际书写时，顺序不能乱，标准语法是：

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

• font-size 和 font-family 是强制项，其他都可省略
• font-size 必须带单位（如 16px、1.2em），不能是纯数字
• font-size 和 line-height 之间用 / 连接，且中间不能有空格（16px/1.5 ✅，16px / 1.5 ❌）
• font-family 若含空格（如 "Helvetica Neue"），必须加引号

省略值会重置为初始值，不是“保持原样”

font 是简写，不是叠加。只要用了它，所有未显式声明的子属性都会回退到浏览器默认值，而不是继承父元素或保留之前设置。

比如你之前设过 font-style: italic;，然后在子元素里写 font: normal 18px sans-serif;，那 font-style 就变成 normal，不是维持 italic。

立即学习“前端免费学习笔记（深入）”；

• font-style 默认为 normal
• font-variant 默认为 normal
• font-weight 默认为 normal
• line-height 默认为 normal（不是 1，也不是继承值）

常见错误：混淆 font 和 font-size 的单位与缩放逻辑

当使用相对单位（如 em、rem）时，font 简写中的 font-size 仍按常规继承规则计算，但 line-height 的行为容易被误判：

• line-height 写成无单位数值（如 1.5）时，是相对于当前元素的 font-size 计算的，可继承
• line-height 写成带单位（如 24px）时，是绝对值，不再随 font-size 缩放
• 所以 font: 1.2rem/1.4 "Segoe ui", sans-serif; 比 font: 1.2rem/20px "Segoe UI", sans-serif; 更健壮

现代项目中更推荐分开写，而非依赖 font 简写

除非在 css Reset 或极简工具类中批量覆盖，否则日常开发中拆开写 font-size、font-weight 等更安全、可维护性更高。

• 避免意外重置 font-style 或 line-height
• 支持 CSS 自定义属性（--font-size）更直接，font 简写无法部分变量化
• 调试时更容易定位哪个子属性出了问题，而不是反复检查简写顺序和缺省逻辑

真正需要简写的场景其实很少，多数时候你以为在“简化”，实际是在埋一个隐性重置陷阱。