CSS中的`letter-spacing`属性是精准控制文字字符间距的核心工具，支持像素、em、ch等灵活单位，既能为英文标题增添呼吸感，也能让中文汉字间均匀留白；它区别于仅影响单词间隔的`word-spacing`，适用于所有字符（含中英文、数字与标点），但需警惕iOS Safari对负值的渲染偏差、避免内联样式和rem单位，并在响应式设计中优先采用`em`或`ch`等相对单位以确保缩放友好与跨设备一致性。

用 letter-spacing 控制字母间距

直接在 CSS 里设 letter-spacing 就行，它作用于所有文本节点，包括中文、英文、数字和标点。值可以是正数（拉开）、负数（收紧）或 normal（浏览器默认，通常为 0）。

常见写法：

h1 {
  letter-spacing: 2px;
}
p.subtitle {
  letter-spacing: -0.5px;
}

注意：该属性不继承自父元素，但你可以在父容器上设置，子文本会自动应用（因为默认继承）。如果子元素显式设置了 letter-spacing，就会覆盖父级。

letter-spacing 和 word-spacing 别混用

letter-spacing 拉的是每个字符之间的空隙，word-spacing 只影响单词之间的空格（对中文基本无效，因中文无空格分词）。

• 给英文标题加呼吸感 → 用 letter-spacing
• 想让「Hello World」两个单词离远点 → 用 word-spacing
• 给中文标题“产品介绍”加间距 → 仍用 letter-spacing，每个汉字间都会插入间隙

误用 word-spacing 处理中文或单个字母时，几乎看不到效果。

响应式场景下慎用固定像素值

写死 letter-spacing: 2px 在小屏上可能显得过松，大屏又不够明显。更稳妥的方式是用相对单位：

• letter-spacing: 0.05em —— 相对于当前字体大小，缩放友好
• letter-spacing: 0.1ch —— 基于 “0” 字符宽度，适合等宽字体场景
• 避免用 rem，它依赖根字号，而字母间距应随本元素字号变化

另外，iOS Safari 对负值 letter-spacing 渲染偶尔有微小偏移（尤其配合 transform: scale() 时），若做高精度排版，建议在真机上验证。

内联样式 or 外部 CSS？优先选后者

不要在

这样写——维护困难，且无法复用。哪怕只改一处，也建议抽成 class：

<h1 class="title-tight">紧凑标题</h1>

然后统一管理：

.title-tight {
  letter-spacing: -0.3px;
}

特别注意：某些 UI 框架（如 Bootstrap）的 .text-uppercase 类会隐式改变字重和渲染行为，叠加 letter-spacing 后可能让小写字母变模糊，这时候要手动重置或用 font-variant-caps: small-caps 替代。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《文字间距设置方法与示例》文章吧，也可关注golang学习网公众号了解相关技术文章。

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问