用 letter-spacing 和 line-height（无单位）配合调控文字松紧与行间呼吸感更有效；letter-spacing 需按场景微调，line-height 必用无单位值以保障响应式与可访问性。
直接结论：用 letter-spacing 控制字符松紧，用 line-height（无单位数值）控制行间呼吸感，两者配合比单调加大间距更有效。
为什么 letter-spacing 不能乱调？
它不是“让文字更好看”的万能开关，而是针对特定场景的微调工具：
- 中文标题加
letter-spacing: 0.05em可缓解大字号下的字形拥挤，但正文段落加负值（如-0.02em）极易导致字粘连，尤其在小屏上 - 英文单词用
letter-spacing拉开比word-spacing更稳定——后者只作用于空格，而英文连字符、缩写（如 “don’t”）不受影响 - 思源黑体、HarmonyOS Sans 等现代中文字体自带优化字距，强行加
letter-spacing反而破坏原有节奏，建议先关掉再实测 - 可访问性风险：屏幕阅读器不解析
letter-spacing，但过大的正值会让语音停顿异常，WCAG 建议保持 ≤ 0.12em
line-height 必须用无单位数值
写成 line-height: 1.7 而不是 24px 或 170%，原因很实际：
- 子元素字体变大时（比如
span加粗放大），line-height: 1.7会自动按新字号重算，而24px会卡死，导致文字挤出容器或重叠 - 响应式换根字体（
html { font-size: clamp(14px, 1.2vw, 16px); }）时，无单位值能同步缩放，em值则受祖先影响易失真 - 中文段落从
1.5起步常显压抑，1.7–1.8是更普适的起点；但若用的是「霞鹜文楷」这类字怀宽大的字体，1.5已足够，盲目拉高反而割裂段落 - 注意：行高过大（>2.0）会使锚点链接点击区域虚化——用户点文字边缘可能触发不到，这点调试时容易漏掉
line-height 在 flex/grid 容器里“失效”怎么办？
不是失效，是被对齐规则覆盖了。关键看你怎么用：
- 如果容器是
display: flex且子项是纯文本块（p、div），line-height依然控制每行内部间距，但整体垂直位置由align-items决定——设成center才看得见效果 - 如果子项是
inline元素（如span、图标），line-height只影响它所在行框高度，想让它上下居中得配vertical-align: middle，而非硬调line-height - 调试技巧：给文本元素临时加
border: 1px solid #f00，能看清实际行框范围，比凭感觉调更准 - 多行省略（
-webkit-line-clamp）必须和line-height配合：max-height应等于line-height × 行数，单位统一用em或calc()，避免用px锁死
真正难的不是参数值本身，而是判断哪段文字需要收紧、哪段需要留白——同一页面里，标题、正文、引用块、代码片段的 line-height 和 letter-spacing 往往该不同，而不是套一个全局值完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
