CSS letter-spacing 属性详解：掌控字符之间的呼吸感

在排版世界里，字距（letter-spacing ）往往是最容易被忽略、却最能影响阅读质感的一环。太紧，字挤在一起喘不过气；太松，单词又散成一地芝麻。今天聊聊 CSS 里的 letter-spacing，看看怎么用它给文字调出合适的"呼吸感"。

📌 什么是 letter-spacing

letter-spacing用来增加或减少字符之间的空白 （字符间距），作用在元素内的每一个字符上。

css 复制代码

selector {
  letter-spacing: <length> | normal;
}

正值 → 字符间距变大，文字"舒展"
负值 → 字符间距变小，文字"收紧"
normal → 使用当前字体默认的间距（不是 0！这点很关键）

💡 normal和 0的区别：normal会让用户代理保留字体本身的默认字距，且浏览器不会在此基础上为了"两端对齐"再去额外拉伸或压缩字符间距；而 letter-spacing: 0是你显式把额外间距锁成了 0，行为上略有差异。

🎯 取值与表现

取值	说明
`normal`	字体默认间距，由字体文件本身决定
`<length>（正值）`	在默认基础上再加这么多间距，如 `1px`、`0.1em`
`<length>（负值）`	在默认基础上缩减间距，如 `-0.5px`

负值理论上允许，但各浏览器实现有下限（不会让你无限缩到字叠字烂掉）。

⚠️ 一个容易踩的坑：太大或太小都会毁掉可读性

MDN 说得很直白：

一个很大的正或负 letter-spacing值，会让被应用的单词变得不可读。

------ 正值太大，字母散得像一盘沙；负值太大，字母叠成一团糊。

而且没有"万能安全值"------不同字族（衬线 / 无衬线 / 等宽）字符宽度差异很大，可读性必须 case by case 调。比如：

中文正文：0或 normal就够，很少动
英文大标题：给 0.05em ~ 0.1em常常更显精致
极细字体：可能要稍微加一点正间距
极粗黑体做大字标语：偶尔用一点点负值能"收口"

🧪 实战案例

css 复制代码

<style>
  .box {
    width: 500px;
    height: 200px;
    background-color: red;
    color: #fff;
  }

  .loose {
    letter-spacing: 3px;   /* 正值：字符间距变大 */
  }

  .tight {
    letter-spacing: -2px;  /* 负值：字符间距变小 */
  }
</style>

html 复制代码

<div class="box loose">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum ducimus...
</div>

<div class="box tight">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum ducimus...
</div>

对比一下就能直观感受到：同样的字，换一个 letter-spacing，气质完全不一样。

✨ 几个实用小建议

单位优先用 em而非 px ------ 字号变化时字距能跟着缩放，响应式更稳
标题可松，正文别动 ------ 正文强行改 letter-spacing 很容易破坏阅读节奏
配合 text-align: justify时要小心 ------ letter-spacing的值不会被 UA 再额外拉伸来做对齐（这正是 normal和 0的另一个差异点）
中英混排时，建议以小字号正文为准，别为了"看起来酷"在大段正文里上 ± 大值

letter-spacing是个小属性，但用好了，排版质感立刻上一个台阶。下次做 Landing Page 的大标题时，不妨试着 +0.05em，说不定就是那一口"对了"的味道。

读者互动：

如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
如果觉得文章有帮助，欢迎点赞鼓励。
想与我共同进步，欢迎关注我。

💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉