font-size不生效的主因是父级使用rem/em导致计算值偏离预期，其次为继承中断、框架重置、viewport缩放及字体回退等问题，需逐级检查Computed值并验证fallback。
直接用 font-size 不生效？先看父级是否用了 rem 或 em
很多情况下写死了 font-size: 16px 却没变化，不是 CSS 没加载，而是当前元素的字体单位被上级的根字体或相对单位覆盖了。比如 html 标签设了 font-size: 62.5%（让 1rem = 10px），而你又在子元素用 font-size: 1.4rem，那实际就是 14px —— 表面写了值，但算出来和预期不符。
排查建议：
- 用浏览器开发者工具检查该元素最终计算出的
font-size值（Elements → Computed → font-size） - 往上逐级看
font-size是否被rem/em连锁影响 - 临时加
font-size: 16px !important测试是否是层叠问题（仅调试，勿上线）
body 或 html 设置了 font-size，但子元素没继承？
CSS 中 font-size 默认是可继承属性，但一旦子元素自己声明了任何字体大小（哪怕只是 font-size: initial），就会切断继承链。更隐蔽的是：某些 UI 框架（如 Ant Design、Element Plus）会在组件内部重置字体，导致你改了 body，但按钮、表格里的文字纹丝不动。
常见表现：
立即学习“前端免费学习笔记（深入）”；
-
body { font-size: 14px; }写了，但仍是 16px - 使用了
normalize.css或reset.css，它们可能对body或html做了显式声明 - 框架组件内联了
style="font-size: 12px"，优先级高于外部样式表
移动端 viewport 缩放干扰字体显示
在 iOS Safari 或部分安卓浏览器中，即使写了 font-size: 16px，页面缩放或系统「更大字体」辅助设置会强制放大文本，尤其当 viewport 元素没配好时。典型错误是漏掉 user-scalable=no 或误设 maximum-scale=1.0 导致字体被“撑开”。
安全写法（适配大多数场景）：
注意：user-scalable=no 会影响可访问性，生产环境慎用；若需兼顾，可用 -webkit-text-size-adjust: 100% 抑制自动缩放，但仅对非 input/textarea 生效。
字体本身不支持指定大小？font-family 缺失或 fallback 失败
极少数情况：你写了 font-size: 20px，但字体渲染看起来像 18px，原因可能是当前 font-family 指定的字体文件未加载成功，浏览器回退到系统默认字体（如 Windows 的微软雅黑 vs macOS 的 San Francisco），而不同字体的「视觉字号」和度量值（ascent/descent）差异很大，同一 font-size 下实际占位高度不同。
验证方式：
- 打开开发者工具 → Elements → 选中文字元素 → 查看 Computed 面板中的
font-family实际解析结果 - 用
@font-face加载自定义字体时，确认src路径正确且返回 200 - 避免只写一个字体名，例如
font-family: "PingFang SC"，应提供 fallback：font-family: "PingFang SC", "Helvetica Neue", sans-serif
line-height 和 vertical-align 微调，光改 font-size 不够；还有些字体在小字号下会触发浏览器的抗锯齿降级策略，看着“发虚”，这不是大小问题，是渲染机制。 
