应将字号映射到语义层级并绑定CSS自定义属性，如.text-sm对应–font-size-sm，同时font-size与line-height按层级联动设置，避免px硬编码和行高失衡。
font-size 工具类怎么写才不和设计系统冲突
直接用 font-size: 14px 写死在工具类里，很快就会被设计师一句“全局改成 15px”打回原形。真正可持续的做法是把字号映射到语义层级，比如 text-sm 对应小号辅助文字，text-base 对应正文，默认值绑定 CSS 自定义属性。
推荐结构：
:root {
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
}
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
这样改字号只需动 :root，所有工具类自动响应。别用 px 值硬编码，否则响应式断点里没法用 clamp() 或缩放。
line-height 工具类必须和 font-size 联动设置
单独设 line-height: 1.5 看似省事，但遇到 font-size: 12px 和 font-size: 24px 时，视觉行距会严重失衡——小字显得太松，大字又挤在一起。
立即学习“前端免费学习笔记（深入）”；
正确做法是按字号层级配对定义：
.text-xs { font-size: var(--font-size-xs); line-height: 1.33; }
.text-sm { font-size: var(--font-size-sm); line-height: 1.43; }
.text-base { font-size: var(--font-size-base); line-height: 1.5; }
.text-lg { font-size: var(--font-size-lg); line-height: 1.44; }
注意：line-height 值不是固定小数。字号越大，人眼感知的垂直空间越紧张，所以 text-lg 的行高反而略低于 text-base（1.44
