CSS字体大小不生效？font-size排查与继承问题

CSS字体大小设置看似简单却常“失灵”，真正原因往往不是代码写错，而是被隐藏的继承中断、父元素的font-size:0或line-height:0陷阱、单位（em/rem/%）在动态上下文中的计算偏差、display属性或元素类型限制（如表单控件、SVG、伪元素），以及选择器权重和!important滥用等多重因素共同干扰；掌握用开发者工具精准查看computed值、逐层排查继承链、区分声明与实际渲染效果，才能快速定位并彻底解决“字变不了大”的顽疾。

字体大小设了但没变化，大概率是 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;" —— 若生效，说明是外部样式表中的某条规则压制了你

好了，本文到此结束，带大家了解了《CSS字体大小不生效？font-size排查与继承问题》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！