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