字体大小未生效通常是CSS优先级、继承中断或元素限制所致;需检查父元素font-size:0或line-height:0、单位匹配性、display属性、伪元素content及选择器权重。

字体大小设了但没变化,大概率是 CSS 优先级或继承规则在“捣鬼”。不是代码写错了,而是样式被覆盖、继承被截断,或者元素本身不支持文本渲染。
检查父元素是否设置了 font-size: 0 或 line-height: 0
这是高频陷阱。如果某个祖先容器(比如 div、header)设置了 font-size: 0,子元素用 em、rem 或百分比定义字号时,会基于 0 计算,结果就是“看不见文字”。
同理,line-height: 0 可能让文字被裁掉,看起来像没生效。
- 用浏览器开发者工具(F12)逐层点击父节点,看 computed 标签页里
font-size实际值是不是 0 或极小 - 临时给目标元素加
font-size: 16px !important;测试是否恢复——若恢复,说明是继承链上游压低了基准
确认单位是否匹配预期:px / em / rem / % 的行为差异
px 是绝对单位,一般最稳;但 em 相对父元素,rem 相对根元素(html),% 也相对父元素。一旦父级字号动态变化或被重置,它们就会“失准”。
- 查 computed 样式中
font-size的最终数值(不是 styles 面板里的声明),看它到底是多少 px - 若用了
rem,检查html元素的font-size是否被 JS 修改过(比如适配方案中动态设置为 50px) - 避免嵌套多层
em,例如父设font-size: 0.8em,子再设1.2em,实际是 0.96 倍根字号,易误判
排查 display 属性与内容类型限制
有些元素默认不渲染文字,或对字体样式“免疫”。例如:
立即学习“前端免费学习笔记(深入)”;
-
display: none或visibility: hidden—— 字体再大也看不见 -
input、button等表单控件,需单独设置font-size,不会自动继承父级字号 -
svg text元素必须显式设font-size,不受外部 CSS 字体规则影响 - 伪元素
::before/::after若没设content,或content为空,字体设置无效
留意 CSS 优先级和 !important 的干扰
后写的样式不一定生效——选择器权重更高才会赢。比如 .box p { font-size: 12px; } 比 p { font-size: 16px; } 权重高,即使后者写在后面也会被覆盖。
- 在 Elements 面板中看目标元素上哪条
font-size被划掉了(灰色删除线),点开它看来源文件和行号 - 避免滥用
!important:多个!important同时存在时,仍按选择器权重决胜负 - 临时用内联样式测试:
style="font-size: 18px;"—— 若生效,说明是外部样式表中的某条规则压制了你










