font-size必须带单位(除0外),px适合固定尺寸,rem更适配响应式;继承的是计算值,line-height无单位时才与font-size成比例。

font-size 值类型选错导致样式不生效
很多人写 font-size: 12; 发现没反应——漏写了单位。CSS 中除 0 外,所有非无单位数值都必须带单位,否则声明无效。
-
px最常用,绝对像素值,适合固定尺寸场景(如按钮文字) -
em相对于父元素font-size,嵌套深时容易失控,比如父级是16px,子级写1.5em就是24px,再往下一层又乘一次 -
rem相对于根元素(html)的font-size,更可控,适配响应式首选 - 百分比(如
120%)等价于em,但可读性稍差
移动端 font-size 用 px 还是 rem?
用 px 在 iOS Safari 某些版本里会被强制缩放(尤其双击放大后),而 rem 配合根字体动态调整,能更好支持响应式和无障碍缩放。
- 别直接在
html上写死font-size: 16px,改用 JS 或媒体查询动态设(如html { font-size: calc(16px + 0.25vw); }) - 如果项目已用
px遍地,临时加-webkit-text-size-adjust: 100%可禁用 Safari 自动缩放,但只是补丁,不是解法 - 注意:Chrome Android 对
rem的渲染精度略低,小字号(如12rem)慎用,避免意外截断
font-size 继承行为容易被忽略
font-size 是可继承属性,但继承的是计算后的值,不是原始声明。这意味着你看到的“子元素字号”,可能早已被多层父级转换过。
- 检查 computed styles 时,看的是“resolved”值,不是“original”,别只盯着 CSS 文件里的数字
-
em和%在继承链中会逐层相乘,一个0.8em套三层就是原始值的0.512倍 - 想重置继承,显式写
font-size: inherit或font-size: 1rem,别依赖默认
line-height 和 font-size 的隐式耦合
line-height 若写无单位数值(如 1.5),它会乘以当前元素的 font-size 计算行高;若写带单位值(如 24px),就脱离字号独立计算——这点常被当成“行高调大了字就变大”来误调。
立即学习“前端免费学习笔记(深入)”;
- 推荐始终用无单位
line-height(如1.4),保证比例一致 - 避免
line-height: 0或极小值,会导致文字被裁切,尤其在不同字体下表现不稳定 - Flex 容器里文字垂直居中,别靠
line-height等于容器高,用align-items: center更可靠
rem、em 还是干脆让步用 px ——这时候看的不是语法,是上下文。










