letter-spacing 是统一调整字符框间空白的排版属性，非逐字符精确控制；它影响所有相邻字符（含中英文、标点、空格）间距，具继承性，支持正负length值和normal，默认值等效于0。
letter-spacing 不是用来“精确控制每个字符间隙”的工具，而是统一调整字符框之间空白的排版属性；调得准，标题立刻更稳、更透气——但数值稍偏，就容易撑出容器、粘连笔画或在 iOS 上闪动。
letter-spacing 设负值时中文为什么容易粘连
中文每个字是独立字符框，letter-spacing: -0.05em 会让每个汉字右边缘向左压缩同等距离，导致“的”“了”“人”等带点、钩、捺的字形视觉上重叠。尤其在小字号（≤16px）或低 DPI 屏幕下，Firefox 渲染更保守，Chrome/Safari 更激进，同一值可能一个正常、一个已糊成一片。
- 安全上限建议：中文 ≤
-0.05em，再低务必在真机上逐字检查“丶”“㇏”“?”等收笔处 - 标点也受控：全角逗号、句号会被一起压紧，可能紧贴前字，造成“标题，”变成“标题，”中间无呼吸感
- 修复方式：若必须收紧，优先用
font-feature-settings: "kern"激活字体自带字距对，或换用专为屏幕优化的中文字体（如 HarmonyOS Sans）
移动端标题用 em 单位而不是 px 的真实原因
写 letter-spacing: 2px 在 iPhone 上看似整齐，但遇到用户开启“更大字体”系统设置、或页面缩放至 125%，这个 2px 就卡死不动，而文字本身被放大了，结果间距反而显得越来越窄，标题瞬间“憋闷”。em 是基于当前元素 font-size 动态计算的，才是真响应。
-
h1 { font-size: 2rem; letter-spacing: 0.04em; }→ 实际间距 = 2rem × 0.04 = 当前字号的 4% - 小屏媒体查询里可微增：
@media (max-width: 480px) { h1 { letter-spacing: 0.05em; } }，弥补小字号下视觉密度上升 - 别用
rem控制字间距：它依赖:root字号，一旦根字号被 JS 动态修改（比如暗色模式切换），所有字距会突变，且无法随本元素字号缩放
为什么给 uppercase 英文加 letter-spacing 很常见，但中文不推荐
英文全大写后，字母本身宽度变小（比如 a → A）、字形结构更方正，text-transform: uppercase 不改变原始字距逻辑，结果就是“TEXT”挤成一团。而中文没有大小写概念，“标题”无论怎么转，每个字仍是完整字符框，加 letter-spacing 只是机械拉远，缺乏语义支撑。
- 英文安全值：
text-transform: uppercase; letter-spacing: 0.03em～0.06em，超过0.08em易破坏单词识别（如 “W3C” 拆成 “W 3 C”） - 中文若硬要加，仅限黑体类标题（如思源黑体 Bold），且严格限制在
0.02em～0.04em；细明体、宋体类字体加了反而显空洞 - 真正该动的是字体选择：中文标题想“舒展”，换用字面率更大的字体（如 Alibaba PuHuiTi），比调
letter-spacing更自然
继承性导致子元素错乱的典型场景
父级设了 letter-spacing: 0.05em，子元素里有个 <span class="highlight">重点词</span>，结果“重点词”也被拉宽，和上下文节奏脱节——这不是 bug，是规范行为，因为 letter-spacing 默认继承。
- 修复只需一行：
.highlight { letter-spacing: normal; }，不是0，也不是unset，normal才是语义正确的重置值 - 按钮内文字被撑出容器？先查父级导航栏是否设了全局字距，再在
button或span上加letter-spacing: normal - 动画切换 class 时 iOS Safari 闪动？加
transition: letter-spacing 0.2s ease;缓解，但更稳方案是改用transform: translateX()模拟间距变化（需配合display: inline-block）
最易被忽略的点：它不只影响字母和汉字，还影响空格、全角标点、甚至 emoji —— 调完一定要把“标题，副标题！”“Contact us →”这类混排文本拖到不同设备上看三遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
