letter-spacing 是统一调整字符框间空白的排版属性，非逐字符精确控制；它影响所有相邻字符间距，具继承性，支持正负length值和normal默认值，适用于视觉密度微调但不可替代kerning。
直接说结论：letter-spacing 不是用来“精确控制每个字符间隙”的工具，而是统一调整字符框之间空白的排版属性；它能微调视觉密度，但不能替代 kerning（字距对）或逐字符定位。
letter-spacing 的实际作用范围
它影响的是所有相邻字符（包括字母、汉字、数字、标点）之间的水平空白量，不是“两个字母之间多加 1px”，而是“在每个字符框右边缘统一插入/扣除指定空间”。这意味着：
- 中文标题里每个汉字间都会被等距拉开或压紧，
letter-spacing: 2px对 “标题” 会产生 “标｜题｜” 效果，而非只调首尾 - 英文单词如
W3C中的W和3也会被拉远，可能破坏缩略词识别习惯 - 负值如
letter-spacing: -1px容易导致字符视觉重叠，尤其在小字号或低 DPI 屏幕上 - 该属性具有继承性，父元素设了
letter-spacing: 0.05em，子元素若没重置，也会带入这个值
不同单位对响应式表现的影响
用错单位会让字间距在不同设备上失真。像素（px）固定不变，而相对单位会随上下文缩放：
-
em基于当前元素的font-size，适合标题微调：h1 { letter-spacing: 0.02em; }—— 字号变大时，间距自动放大，保持比例协调 -
rem基于根元素font-size，适合全局统一节奏，但需确保:root有明确定义 -
px在高 DPR 设备（如 Retina 屏）下可能显得过细或过粗，且无法随用户缩放缩放 - 绝对单位如
mm或pt在屏幕渲染中基本无意义，仅在 print stylesheet 中偶有用处
常见误用与修复方式
很多人试图用 letter-spacing 解决本不属于它的排版问题，结果反而引入新 bug：
- 想让英文标题更“舒展”却设了
letter-spacing: 4px→ 实际应优先用font-kerning: normal+ WebFont 自带 kern 表，或换更宽松的字体 - 中文按钮文字被撑出容器 → 检查是否父级设置了
letter-spacing且未在按钮内letter-spacing: normal重置 - 使用
text-transform: uppercase后字母挤在一起 → 这是大小写转换后字形宽度变化导致，可配合轻量正向letter-spacing: 0.03em缓解，但不要超过 0.05em - 动画
letter-spacing时出现闪烁或跳变 → 因为该属性触发重排（reflow），建议改用transform: translateX()模拟，或确保父容器有will-change: transform
真正需要精细控制时该怎么办
当设计稿明确要求某几个字母之间加宽/收紧（比如 AV、To、Wa），letter-spacing 就力不从心了：
- CSS 目前无原生 kerning 支持，
font-kerning依赖字体文件本身是否含 kern 表，且浏览器支持不一 - 可行方案是包裹目标字符用
单独设margin-right或margin-left，但注意这会破坏文本流连续性，影响复制、SEO 和屏幕阅读器 - 更稳妥的做法是让设计师导出 SVG 文本，或使用 WebFont 工具（如 Font Squirrel Generator）启用 kerning 子集
- 如果只是为品牌标识做定制化效果，直接切图或用
background-image配合aria-label是更可控的选择
最常被忽略的一点：letter-spacing 的 normal 并不等于 0，它是字体自身的默认字距基准，不同字体差异很大。调试时别只盯着数值，要对比渲染结果本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
