字号变量应存无单位数值并用calc()动态组合单位与缩放系数，配合字重、行高变量实现响应式与视觉一致性。
字号变量命名要按语义层级，别用px后缀
直接在:root里写--font-size-h1: 2.5rem这种带单位的值，看着清爽，但后续想批量缩放（比如暗色模式下整体缩小5%）就只能重写全部变量。更稳妥的做法是只存无单位数值，单位统一由使用处补上。
-
--fs-xxl: 2.5、--fs-xl: 2、--fs-lg: 1.75、--fs-base: 1、--fs-sm: 0.875、--fs-xs: 0.75 - 所有变量值都是相对于
1rem的倍数，实际使用时写font-size: calc(var(--fs-lg) * 1rem) - 避免
--font-size-h1: 32px这类写法——px在响应式场景下僵硬，且无法被em或rem继承链放大/缩小
用calc()动态组合字号与行高、字重
字号不是孤立存在的。标题需要更大行高，小号文字常配更高字重来保证可读性。把这些关联逻辑也放进变量体系，比零散写死更可控。
- 定义
--lh-base: 1.5、--lh-title: 1.2，再用line-height: calc(var(--fs-lg) * var(--lh-title)) - 搭配字重变量：
--fw-normal: 400、--fw-semibold: 600，标题直接写font-weight: var(--fw-semibold) - 注意：不要把
calc()塞进var()里（如--fs-title: calc(var(--fs-base) * 1.5)），CSS不支持变量嵌套计算
PingFangSC字体下字号梯度需适配字重视觉一致性
PingFangSC的Ultralight和Semibold在相同字号下视觉大小差异明显。单纯按像素阶梯递增会导致排版失衡——比如--fs-lg配Semibold可能比--fs-xl配Ultralight还显大。
- 为不同字重微调字号变量：
--fs-lg-semibold: 1.625、--fs-lg-ultralight: 1.875 - 在组件级覆盖：
.hero-title { font-size: calc(var(--fs-lg-semibold) * 1rem); font-weight: var(--fw-semibold); } - 测试关键断点：iOS Safari对PingFangSC的
Ultralight渲染偏细，小字号下需额外加text-rendering: optimizeLegibility
响应式字号梯度别靠媒体查询硬切
用@media为每个断点重定义整套--fs-*变量，维护成本高且容易漏掉某一级。更轻量的方式是引入一个基础缩放系数。
立即学习“前端免费学习笔记（深入）”；
- 定义
--scale: 1在:root，移动端设为--scale: 0.9，平板设为--scale: 1.05 - 所有字号使用
font-size: calc(var(--fs-base) * var(--scale) * 1rem) - 这样改一套
--scale就能联动所有字号，且不影响字重、行高的独立控制 - 注意：
calc()里不能混用rem和em，统一用1rem作基准，避免嵌套缩放失控
真正难的是让字号梯度在不同设备、不同字体、不同字重下保持视觉节奏稳定。变量只是容器，关键得理解每个数值背后的设计意图——比如--fs-sm不是“小字号”，而是“在正文行高下仍能清晰辨识的最小安全字号”。
