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简写无法部分变量化 - 调试时更容易定位哪个子属性出了问题,而不是反复检查简写顺序和缺省逻辑
真正需要简写的场景其实很少,多数时候你以为在“简化”,实际是在埋一个隐性重置陷阱。










