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

CSS字体大小设置“失效”往往并非代码错误，而是被优先级覆盖、继承链中断（如父元素font-size: 0或line-height: 0）、单位理解偏差（em/rem/%对上下文敏感）、元素自身限制（如表单控件不继承、伪元素缺content、svg text需显式声明）或display/visibility隐藏所致；借助开发者工具查看computed值、逐层排查祖先样式、验证单位基准、检查选择器权重，才能快速定位真正“捣鬼”的环节——原来看不见文字，可能只是它正安静地缩在0像素的起点上。

字体大小设了但没变化，大概率是 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学习网公众号！