letter-spacing 是唯一能直接精准控制字符水平间距的 css 属性，但常因被覆盖、webfont 字距异常、input/textarea 不支持、单位误用（禁用无单位值和%）、负值滥用或中英文混排未分离而“失效”。
letter-spacing 是唯一能直接、精准控制字符间水平空隙的 CSS 属性，不是加空格，也不动盒模型，设了就生效——但值写错、单位乱用、场景误配，它就“看起来没反应”。
为什么写了 letter-spacing 却没变化
常见原因不是语法错误，而是被覆盖或渲染限制：
- 父元素有
white-space: nowrap且容器太窄 → 字符被撑出视口，不是没变，是溢出了 - 用了 WebFont，但字体本身 kerning 关闭或字距异常 →
letter-spacing只能微调，救不了底子 - 样式被后加载的 CSS 覆盖 → 打开 DevTools 的 Computed 标签页，确认
letter-spacing值是否真实应用且未显示crossed out - 在
<input>或<textarea></textarea>上设置 → 多数浏览器（尤其旧版 Safari）不支持或行为不一致，应避免
letter-spacing 的单位怎么选才不翻车
用错单位是响应式失效和跨设备不一致的主因：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 小字号文本（≤14px），比如移动端正文：用
em，例如letter-spacing: 0.03em—— 它随font-size等比缩放，不会在 12px 下显得过松、在 16px 下又看不见 - 大标题（≥24px）：可用
px微调，如letter-spacing: 1.5px，但别超2px，否则易撑破容器 - 禁用无单位值（如
0.1）：它会被解析为0.1px，多数浏览器舍入为 0；也别用%，CSS 规范不支持，浏览器直接忽略 - 中英文混排时，同一值对汉字和拉丁字母视觉影响差异大 → 推荐拆开控制：
span.lang-en { letter-spacing: 0.05em; }+span.lang-zh { letter-spacing: 0.02em; }
负值收紧要小心哪些边界
负值合法，但中文和英文的风险点完全不同：
- 英文大写标题（如
HERO）可安全用letter-spacing: -0.5px或-0.02em微调密度 - 中文字体慎用负值：12–14px 下
-0.5px就可能粘连，“设计”变“设 计”甚至重叠；iOS Safari 对小字号负值渲染尤其不稳定，务必真机测试 - 永远别设
letter-spacing: -2px这类绝对值 → 字号越小，粘连越严重，且无法通过媒体查询优雅降级 - 如果目标是让中文字更“紧凑”，优先检查字体是否支持
font-stretch或可变轴（如 Inter、HarmonyOS Sans），比硬塞负值更可靠
真正难调的从来不是写上 letter-spacing，而是它在不同字体、不同字号、不同浏览器下的渲染一致性——尤其是中文字体在 iOS Safari 和 Android Chrome 上的差异，查文档不如开真机多测几遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
