用 :root 声明 --font-base 变量并设 font-size: var(--font-base, 16px)，JS 通过 setProperty 修改变量值实现全局字体缩放；rem 比 em 更稳定，clamp() 需含 rem 才响应缩放，line-height 用无单位值，letter-spacing 用 em，图标字体同步调整。
如何用 :root 声明可被 JS 修改的字体基准
全局字体缩放本质是控制一个基准值，其他 rem 单位都依赖它。直接在 :root 里定义 CSS 变量最灵活，比如 --font-base: 16px，后续所有 font-size: clamp(1rem, 1.2rem, 1.5rem) 都会随它变化——但注意，clamp() 里的 rem 是基于当前 font-size 计算的，不是直接读变量，所以得让根元素的 font-size 绑定变量。
实操建议：
- 在
:root中写font-size: var(--font-base, 16px)，而不是只声明--font-base变量却不生效 - JS 修改时用
document.documentElement.style.setProperty('--font-base', '18px')，别漏掉px单位（CSS 变量不自动补单位） - 避免在媒体查询里重复设
font-size，否则会覆盖 JS 设置；改用 JS 监听resize后按需重设变量
为什么 rem 比 em 更适合全局缩放
em 是相对父元素字体大小，嵌套深了容易失控；rem 始终相对根元素，只要根的 font-size 可控，整个页面字体就可控。但有个坑：如果组件内用了 em（比如某些 UI 库按钮的 padding），它不会随 rem 缩放同步变化，视觉比例可能错乱。
实操建议：
- 全局统一用
rem写字体、间距、圆角等，确保缩放一致性 - 第三方组件若用
em，优先查其是否支持font-size属性透传，或用!important覆盖其内部em计算（慎用） - 测试时打开浏览器开发者工具，在 Elements 面板手动改
:root的font-size，看布局是否整体等比响应
clamp() 在动态缩放中容易失效的三个原因
clamp() 本身不感知外部变量变化，它只是计算一次静态值。如果你写 font-size: clamp(1rem, 1.2rem, 1.5rem)，而 1rem 已经是动态的，那它确实能缩放；但很多人误以为 clamp(16px, 2vw, 24px) 也能随根字体变——其实不会，因为里面全是绝对或视口单位，和 --font-base 无关。
实操建议：
- 要让
clamp()参与动态缩放，必须至少有一项是rem单位，例如clamp(0.875rem, 4vw, 1.25rem) - 避免在
clamp()里混用px和rem，比如clamp(14px, 1rem, 18px)—— 当1rem = 20px时，中间项反而比上下限大，导致实际取上限 - 移动端小屏下
vw值极小，容易让clamp()锁死在最小值，此时应优先用rem+ 媒体查询兜底
用户切换字体大小后，行高、字重、字间距怎么同步适配
只调 font-size 不动 line-height，小字号时行距会过紧，大字号时又撑开太多。CSS 变量可以复用，但要注意：行高最好用无单位数值（如 line-height: 1.5），它会随字体大小等比缩放；而 letter-spacing 和 word-spacing 必须用 em 或 rem，否则不会变。
实操建议：
- 设置
line-height: 1.4（无单位）即可，不用line-height: 1.4rem -
letter-spacing: 0.01em比0.01rem更稳，因为em相对当前元素字体，rem还是相对根——但两者在此场景效果一致 - 图标字体（如 Font Awesome）若用
font-size控制大小，也要同步调整，否则缩放后图标和文字比例失调；建议统一用em设图标尺寸
真正难的不是设变量或改 JS，而是所有用到字体相关尺寸的地方——包括 border-radius、阴影偏移、甚至 SVG viewBox 内部文字——都得检查是否隐式依赖了固定像素。漏掉一两个，缩放时就会突兀地“卡住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
