最稳妥的字体设置方式是先用 font-size: 16px 统一根元素基准，再用 rem 确保缩放稳定；进阶需结合 CSS 变量定义 --base-font-size、clamp() 实现响应式弹性字号、font-size-adjust 提升小字号可读性。
用 font-size 直接设值是最稳妥的起步方式
别一上来就搞 CSS 变量或媒体查询，先确认基础是否生效：font-size 支持像素（px）、相对单位（em、rem）、百分比（%）等。多数情况下，对 body 或根元素设 font-size: 16px 是起点，后续用 rem 才能稳定缩放。
常见错误是混用单位导致层级失控：比如父元素用 em，子元素再套 em，结果放大倍数叠乘。建议优先用 rem（相对于 :root），避免继承链干扰。
-
1rem默认 = 浏览器默认字号（通常 16px），可被用户系统设置影响 - 设
html { font-size: 10px; }后，1.4rem就 = 14px，计算更直观 - 慎用
!important强制覆盖，容易在响应式断点里引发冲突
用 --base-font-size CSS 变量统一接管所有文字尺寸
真正“统一控大小”的核心不是写一堆 font-size，而是把基准值抽成变量，让所有尺寸都基于它计算。比如定义：
:root {
--base-font-size: 16px;
}
<p>h1 { font-size: calc(var(--base-font-size) <em> 2); }
p { font-size: var(--base-font-size); }
small { font-size: calc(var(--base-font-size) </em> 0.8); }
这样改一个变量，全文案尺寸同比例缩放。注意：calc() 是必须的——CSS 变量不能直接参与运算，var(--base-font-size) * 1.5 会报错，必须包一层 calc()。
- 变量名推荐带语义，如
--text-base比--fs更易维护 - 变量可动态改：JS 中执行
document.documentElement.style.setProperty('--base-font-size', '18px')即实时生效 - 不要在
@media里重复定义同名变量，应在外层统一设，媒体查询内只改值
响应式文字大小别只靠 media query 写死断点
纯用 @media (max-width: 768px) { p { font-size: 14px; } } 很脆弱——屏幕宽度只是参考，用户缩放、系统字体偏好、DPR（设备像素比）都会影响实际阅读体验。更健壮的做法是结合 clamp()：
立即学习“前端免费学习笔记（深入）”；
p {
font-size: clamp(14px, 2.5vw, 18px);
}这行代码意思是：最小 14px，最大 18px，中间按视口宽度 2.5% 线性插值。在小屏上不会太小，大屏上不会撑爆布局，且天然适配缩放。
-
clamp()兼容 Chrome 88+、Firefox 79+、Safari 13.1+，老版本需 fallback - 避免对所有元素都用
vw，标题类可用clamp(1.5rem, 4vw, 2.5rem)，正文用rem保可读性 - 测试时打开浏览器“缩放”（Ctrl + +/-），看文字是否保持清晰、不重叠、不截断
隐藏技巧：用 font-size-adjust 保住小字号下的可读性
当把文字调小（比如 font-size: 12px）时，不同字体 x-height 差异会让某些字（如 “a”、“x”、“o”）看起来更模糊、更挤。这时加一行：font-size-adjust: 0.5;，浏览器会按指定比例调整字体大小，优先保证 x-height 一致，而不是机械放大整个字体包。
这个属性常被忽略，但它对中英文混排、小字号 UI（如表格、标签页）特别有用。取值一般在 0.4–0.6 之间，可通过 DevTools 实时拖动调试。
- 仅对支持该属性的字体生效（如系统 San Francisco、Segoe UI、Roboto）
- 配合
font-familyfallback 使用效果更稳：font-family: "SF Pro Text", system-ui, sans-serif; - 不要和
font-optical-sizing: auto冲突，后者现代字体自带，优先级更高
CSS 变量和 clamp() 看似简单，但真正难的是在多端、多缩放、多字体环境下保持视觉一致性——变量控制基准，clamp() 应对视口，font-size-adjust 补齐渲染细节，三者缺一不可。
