优先用 rem 而非 px，因 rem 随系统字体和缩放响应变化，提升可访问性；px 仅适用于图标、边框等固定尺寸元素；需注意根元素 font-size 是否被重置影响 rem 计算。
font-size 用 px 还是 rem？别直接抄网上代码
浏览器默认字号是 16px，font-size: 16px 和 font-size: 1rem 在多数情况下效果一样，但一旦用户调大系统字体或页面缩放，rem 会响应变化，px 不会。移动端适配、可访问性要求高的项目必须优先考虑 rem 或 em。
常见错误：在 CSS 里写死 font-size: 14px，结果视障用户开启系统大字体后文字被切掉或排版崩坏。
-
px适合固定尺寸图标、边框等不需要缩放的元素，文字慎用 -
rem基于根元素html的font-size，改一处就能批量调全站字号 -
em相对于父元素，嵌套深时容易失控（比如父级font-size: 0.8em，子再设1.2em，实际是 0.96 倍） - 现代项目推荐：根元素设
font-size: clamp(14px, 0.875rem, 16px)，兼顾最小/最大限制和流体缩放
内联 style 写 font-size 要加单位，不然无效
HTML 中用 style 属性写样式时，font-size 后面必须带单位，否则浏览器直接忽略。常见错误是复制粘贴时漏掉 px 或写成 font-size: 14 —— 这行代码等于没写。
示例对比：
立即学习“前端免费学习笔记（深入）”；
<p style="font-size: 14px">正常显示</p> <p style="font-size: 14">实际按浏览器默认字号渲染</p>- 所有长度值（包括
font-size、margin、width）在style里都必须带单位 -
0是唯一例外，可不带单位（margin: 0合法，font-size: 0也合法） - 内联样式优先级高，调试时注意是否被它意外覆盖了 CSS 文件里的设置
body 默认字号不是 16px？检查有没有重置 CSS
有些项目用了 normalize.css 或自定义重置，会把 body 或 html 的 font-size 改成 10px 或 62.5%，目的是让 1rem = 10px，方便用 rem 算数（比如 1.4rem = 14px）。但这个改动会影响所有基于 rem 的计算，且容易被遗忘。
排查方法：打开开发者工具，选中 html 元素，在 Styles 面板里搜 font-size，看是否被第三方 CSS 修改过。
- 若用了
html { font-size: 62.5%; }，那1rem = 10px（因为 16px × 62.5% = 10px） - 若没做任何重置，
1rem就是浏览器默认的 16px - 不同框架默认行为不同：
bootstrap 5不动根字号，Tailwind默认也不改；但某些 ui 库会悄悄改
font-size: smaller/larger 是相对谁？别指望它精准
smaller 和 larger 是相对「父元素当前计算后的字号」动态调整，不是固定增量。比如父级是 15px，子用 larger 可能变成 17.5px（浏览器按比例放大），下次再嵌套又变一次，结果不可控。
真实场景中几乎没人靠它做精确排版，更适合快速原型或临时调试。
- 具体放大比例由浏览器决定，chrome 和 firefox 结果可能不同
- 无法与
px/rem混合计算，比如font-size: larger + 2px语法错误 - 可读性差：别人维护时看到
larger得往上翻好几层才能知道实际多大 - 真正需要弹性字号，用
clamp()或媒体查询更靠谱
字体大小这事，表面是改个数字，背后连着用户设备、系统设置、CSS 继承链和框架默认行为。最常出问题的地方，是以为 rem 天然“响应”，却忘了根元素早就被某个 reset.css 悄悄改过。