CSS字体大小不生效？font-size继承问题解析

从现在开始，努力学习吧！本文《CSS字体大小设置无效？检查font-size与继承关系》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

字体大小未生效通常是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;" —— 若生效，说明是外部样式表中的某条规则压制了你

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~