calc() 是响应式字号最可控方案，但需规避浏览器最小字号限制、vw 基准漂移及单位混用问题；推荐优先使用 clamp()，手动 calc() 需确保分母为固定差值且保留空格。
HTML 文字大小不能靠“隐藏招数”绕过 CSS 规则，但 calc() 确实是响应式字号最可控、最实用的动态方案——前提是理解它和 font-size 的配合边界。
为什么直接写 font-size: calc(16px + 2vw) 有时没效果？
常见现象：页面刷新后文字没变大，或在某些设备上突然缩成一团。根本原因不是 calc() 失效，而是浏览器对 font-size 的最小限制（如 Chrome 强制 ≥ 12px）或父容器未设置 width 导致 vw 基准漂移。
-
vw单位基于视口宽度，但若元素被包裹在display: inline或未设宽的div中，计算可能滞后或错位 - 移动端 Safari 对小于
16px的非body文字有可读性干预，会自动放大——这不是 bug，是 UA 样式 -
calc()里混合单位必须合法：不能calc(1em + 1rem)（虽然语法通过，但结果不可控），推荐统一用px和vw或em和%
font-size 用 calc() 的安全写法（含 fallback）
真正可靠的写法不是炫技，而是分层兜底。下面这段能覆盖从 iPhone 到 4K 屏的字号平滑变化：
h1 {
font-size: 18px; /* 最小字号，兼容老浏览器 */
font-size: clamp(18px, 4vw, 36px); /* 推荐：现代标准，IE 不支持 */
/* 或退而求其次 */
font-size: calc(18px + 2 * ((100vw - 320px) / (1920 - 320))); /* 320px→1920px 区间线性插值 */
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
clamp(min, preferred, max)是目前最简洁的响应式字号方案，比手写calc()更易读、更难出错 - 手动
calc()插值时，分母必须是固定差值（如1920 - 320），不能写成100vw - 320px——那会导致除零或负数 - 所有
calc()表达式里的空格不能省：calc(1em+2vw)会解析失败，必须是calc(1em + 2vw)
哪些场景千万别用 calc() 算字号？
不是所有动态需求都适合算出来。以下情况硬套 calc() 反而增加维护成本甚至引发布局抖动：
- 按钮内文字需要随图标大小等比缩放 → 改用
em或rem，让字号继承父级缩放比例 -
多语言文案长度差异极大（如中英文混排）→ 字号应固定，靠
flex或text-overflow控制容器，而非动态调字体 - 需要精确像素对齐的 UI 组件（如数据表格表头）→
calc()在 sub-pixel 渲染下可能产生模糊，优先用媒体查询分段 - SSR 页面首次渲染时 JS 未加载 → 若依赖 JS 动态写
style再算字号，首屏会闪动；此时纯 CSSclamp或媒体查询才是真·服务端友好
真正难的不是写出 calc(16px + 0.5vw)，而是判断这个表达式在 iOS Safari 的 pinch-zoom 下是否仍保持可读性，在 Windows 高 DPI 设置下是否被系统缩放二次干扰，以及当用户禁用字号缩放时它会不会直接失效。这些细节不写进 CSS，得靠真实设备反复测。
