直接用vw或媒体查询导致响应式字体失控，本质是缺乏比例锚点和缩放边界；应使用clamp()设定最小值、首选值、最大值，并配合em继承、CSS变量统一管理字号层级。
为什么直接用 vw 或媒体查询堆字号会失控
响应式字体混乱，本质是缺乏约束规则。很多人一上来就给每个标题写一堆 @media，或者全量用 font-size: 4vw，结果是：h1 在小屏比 p 还小，button 字号跳变突兀，无障碍缩放失效。根本问题不是“没设字号”，而是没有定义字号的**比例锚点**和**缩放边界**。
用 clamp() 建立可预测的字号层级
clamp() 是目前最可控的响应式字号方案：它把字号锁在最小值、首选值、最大值之间，浏览器按视口线性插值，且支持无障碍字体缩放（不像纯 vw）。关键是要为每类文本设定统一的基准比例，比如：
-
h1→clamp(1.5rem, 4.5vw, 2.5rem)（最小 1.5rem，最大 2.5rem，中间随视口平滑过渡） -
h2→clamp(1.25rem, 3.8vw, 2rem) -
p,li→clamp(1rem, 3.2vw, 1.25rem)
所有值都基于 rem 起始，确保根字号（:root 的 font-size）变化时整体可调；vw 部分控制响应斜率，避免小屏过小、大屏过大。
配合 em 和相对单位维护层级关系
层级混乱常发生在嵌套组件里——比如卡片内一个 h3 突然比外层 h2 还大。解决办法是：**所有组件内字号用 em 或无单位数值声明，而非绝对 rem 或 px**。这样字号继承父容器的计算后字号，层级自然对齐。
立即学习“前端免费学习笔记（深入）”；
/* 卡片组件内部 */
.card-title {
font-size: 1.3em; /* 相对于父容器当前字号，不破坏全局比例 */
}
.card-body p {
font-size: 0.95em;
}同时禁止在组件内部重设 font-size 为 rem 或 px，否则会切断继承链。如果必须固定尺寸（如图标旁文字），改用 ch 或 ex 等字符相关单位，比 px 更具上下文感知。
用 CSS 自定义属性统一管理字号变量
把字号逻辑抽成变量，避免硬编码。重点不是“有多少个变量”，而是“哪些变量真正影响比例结构”：
-
--fs-base: clamp(1rem, 3.2vw, 1.25rem)（正文基准） -
--fs-h1: clamp(1.5rem, 4.5vw, 2.5rem)（严格对应设计系统中的 h1 比例） -
--fs-scale: 1.25（仅用于计算衍生字号，如calc(var(--fs-base) * var(--fs-scale))）
变量名带语义（fs = font size），不叫 --size-1 或 --text-lg——后者无法体现层级意图，后期调整时容易误判影响范围。
真正难的不是写多少 clamp()，而是决定哪几处必须锁定最小/最大值。比如按钮文字宁可截断也不缩小到不可读，而文章正文必须保证最小行高与字号匹配。这些约束得从内容类型出发，而不是从屏幕尺寸出发。
