直接用--font-scale更可控，因clamp()仅依赖视口、无法适配容器宽度，且难以同步letter-spacing、line-height等属性；而--font-scale解耦缩放逻辑，支持全衍生属性统一响应，并避免全局rem污染。
直接用 --font-scale 控制缩放系数，比在 font-size 里硬写 clamp() 更可控、更易维护。
为什么不能直接在 font-size 里写 clamp()？
常见错误是把所有逻辑塞进一个 font-size: clamp(1rem, 4vw, 1.5rem) —— 这看似简洁，但一旦需要同步调整 letter-spacing 或 line-height，就得重复写一遍 clamp()，还容易漏掉单位换算。更麻烦的是：同一段文字在不同容器（比如侧边栏 vs 主内容区）里缩放行为完全一样，违背“字号应随容器宽度变化”的设计本意。
根本问题在于：clamp() 本身不带上下文，它只认视口，不认父容器；而阅读体验真正依赖的是内容密度，不是屏幕尺寸。
- 用
vw时，小屏手机上标题可能缩到0.8rem，字太小看不清 - 用
rem动态改根节点，会波及全局，导致按钮、图标等非文本元素也被意外缩放 - 没抽离系数，
margin、padding等衍生值无法自动响应字号变化
怎么定义和使用 --font-scale 变量？
核心是把“缩放比例”从字体大小中解耦出来，作为独立变量管理：
:root { --font-scale: 1; } —— 默认设为 1，方便调试和继承
在具体容器上设置动态值，例如：
.article {
--font-scale: clamp(0.8, 100% / 640, 1.2);
}
这里 640 是设计基准宽度（px），100% / 640 表示“当前容器宽度 ÷ 基准宽度”，结果就是纯数字缩放比。再用 clamp() 限制范围，避免极端值。
- 该容器必须有明确宽度（如
width: 100%或max-width: 640px），否则100%计算失效 - 不要用
vw替代100% / N，前者绑定视口，后者绑定容器，语义完全不同 -
clamp()的三个参数顺序不能错：最小值、首选值、最大值
如何让其他属性同步响应字号变化？
有了 --font-scale，所有依赖字号的属性都可以统一乘这个系数，不用各自写 clamp()：
p {
font-size: calc(var(--base-font-size, 16px) * var(--font-scale));
line-height: calc(1.5 * var(--font-scale));
letter-spacing: calc(0.02em * var(--font-scale));
margin-bottom: calc(1rem * var(--font-scale));
}
注意：line-height 推荐用无单位数值（如 1.5），乘上 --font-scale 后仍是无单位，浏览器能正确解析；若用 rem 或 em 单位再相乘，可能引发意外缩放。
-
letter-spacing用em作单位最稳妥，它天然相对于当前font-size -
margin和padding建议统一用rem或em，再乘系数，保持视觉节奏一致 - 避免对
font-size本身再嵌套calc()+clamp()，会造成计算层级混乱
兼容性和 SSR 首屏错位怎么处理？
clamp() 在 Safari 13.1+ 才完全支持，老版本会退化为第一个值（0.8）。更重要的是：服务端渲染（SSR）时，Node.js 环境没有 window.innerWidth，100% / 640 无法计算，首屏可能显示为默认 1 或 0，造成闪动。
解决办法是加一层降级：
.article {
font-size: 1rem; /* fallback */
font-size: calc(var(--base-font-size, 16px) * var(--font-scale, 1));
}
同时在 HTML 根节点加 style="--font-scale: 1;"，确保 SSR 输出一个确定值，客户端 JS 可随后接管并重设。
真正容易被忽略的点是：自定义属性的继承链必须完整。如果中间某层写了 --font-scale: initial 或 unset，后续所有子元素都会断连——这种 bug 很难定位，建议用 DevTools 的“Computed”面板逐层检查变量值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
