text-indent 和 line-height 均支持 css 自定义变量，但效果不一致：line-height 推荐用无单位数字（如 --lh: 1.6），确保比例缩放；text-indent 必须带合法单位（如 --indent: 2rem），否则值非法被忽略。
text-indent 和 line-height 都支持 CSS 自定义变量，但变量必须在计算前已定义且作用域正确；直接用 var(--indent) 替代固定值可行，但若变量未声明或被重写，缩进和行高会退回到浏览器默认值（text-indent: 0，line-height: normal），而不是“失效报错”。
为什么 text-indent 和 line-height 能用变量，但效果常不一致
两者都接受长度、数字、百分比等合法值类型，所以语法上完全兼容 var()。但实际渲染中差异明显：
-
line-height接收无单位数字（如1.6）时是无条件继承的倍数关系，而var(--lh)若被赋值为"1.6"（字符串）或1.6px（带单位），会导致计算异常甚至回退到normal -
text-indent对单位更敏感：若--indent定义为2（纯数字），浏览器不会自动补em，结果是text-indent: 2—— 这是非法值，会被忽略；必须写成2em或2rem等完整值 - 变量若在媒体查询内定义，但
text-indent规则写在外部，则响应式缩进不会触发；line-height同理，但因它多用于字体继承链，影响面更广
:root 里定义变量时，哪些写法会悄悄破坏 text-indent
常见错误不是“没定义”，而是定义方式导致值不可用：
- 漏写单位：
--indent: 2;❌ → 应写--indent: 2em;✅ - 用空格分隔多个值：
--indent: 2 em;❌ → CSS 不识别这种空格分隔，整个变量值无效 - 混用引号：
--indent: "2em";❌ → 引号会让值变成字符串，text-indent拒绝解析 - 在
@supports或嵌套 CSS 中定义但未提升作用域，导致p元素无法访问
验证方法：在开发者工具的 Styles 面板里看 text-indent 是否显示为 var(--indent) 并带有删除线 —— 有删除线说明变量值非法或未找到。
如何让 text-indent 和 line-height 变量协同适配不同字体大小
关键不在“一起用”，而在“各自匹配语义”：
-
line-height推荐用无单位数字变量（如--lh: 1.6;），因为它本质是比例；这样line-height: var(--lh);在任何字号下都稳定 -
text-indent必须用相对单位变量（--indent: 2em;或--indent: 2rem;），否则缩进无法随字号缩放；2rem更适合全局统一控制，2em更适合局部字体独立调整 - 避免把两个变量绑死在一个媒体查询里修改，比如同时改
--indent和--lh—— 行高应由字体可读性决定，缩进应由段落结构决定，二者逻辑解耦才易维护 - 如果页面支持用户自定义字体大小（如通过
html { font-size: clamp(16px, 1.2vw, 20px); }），--indent: 2rem比2em更可靠，因为rem始终锚定根字号
移动端 Safari / 微信内置浏览器里变量缩进突然消失？
这不是变量问题，是渲染层对 text-indent + 变量 + 小字号的组合处理缺陷：
- iOS 17+ 和微信 8.0.45+ 中，当
font-sizetext-indent 使用var(--x)时，部分机型会跳过缩进计算，表现为“看起来没缩进”，实测是缩进了但被line-height过小或overflow: hidden截断 - 临时解法：给段落加
line-height: calc(var(--lh) * 1em);显式撑开行盒，再配合text-indent: var(--indent); - 更稳方案：对
.p-small这类小字号段落，放弃变量，直接写text-indent: 2em;—— 变量带来的灵活性，在此处远不如确定性重要 - 不要依赖
::first-line+ 变量做缩进，iOS 下::first-line本身对变量支持极差，且无法设置text-indent
真正难调试的，从来不是变量写法，而是你假设“变量一设就全局生效”，却忽略了它在不同渲染引擎里被解析的时机和上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
