在HTML & CSS中，letter-spacing详解

文章目录

• • [解决方案：使用相对单位 `em`](#解决方案：使用相对单位 em)
  • 注意事项
  • • [1. 继承行为中，将不会按照字体大小来计算间距](#1. 继承行为中，将不会按照字体大小来计算间距)
    • [2. 为什么不使用百分比？](#2. 为什么不使用百分比？)
    • [3. 组合微调](#3. 组合微调)
  • 示例对比
  • 总结

在 HTML 中使用 letter-spacing 时，若直接使用固定单位（如 px），间距是绝对值。对于小号字体，这个绝对间距会显得过大；对于大号字体，又会显得过小。这是因为固定间距没有随字体大小变化而等比例缩放。

解决方案：使用相对单位 em

em 是相对于当前元素 font-size 的单位。设置 letter-spacing 为 em 值后，间距会随着字体大小自动缩放，始终保持视觉比例。

/* 每个元素根据自身字体大小应用 0.05 倍的字间距 */
* {
  letter-spacing: 0.05em;
}

或者只对特定元素设置：

p {
  letter-spacing: 0.03em;
}
h1 {
  letter-spacing: 0.02em; /* 大标题通常需要更小的比例 */
}

注意事项

1. 继承行为中，将不会按照字体大小来计算间距

如果在父元素上用 em 设置了 letter-spacing，子元素继承的是计算后的绝对值 （如 16px），而不是比例值。

✅ 正确做法 ：直接在需要调整的元素上设置，或使用通配选择器 * 统一指定。

2. 为什么不使用百分比？

CSS 规范中 letter-spacing 不支持百分比值（浏览器通常忽略），因此 em 是最合适的相对单位。

3. 组合微调

如果需要在相对基础上增加微小固定偏移，可以使用 calc()：

letter-spacing: calc(0.03em + 0.5px);

示例对比

<p style="font-size: 12px; letter-spacing: 2px;">小字体固定间距（显得稀疏）</p>
<p style="font-size: 12px; letter-spacing: 0.1em;">小字体相对间距（视觉舒适）</p>

<p style="font-size: 36px; letter-spacing: 2px;">大字体固定间距（显得拥挤）</p>
<p style="font-size: 36px; letter-spacing: 0.1em;">大字体相对间距（比例协调）</p>

总结

使用 em 单位让 letter-spacing 与字体大小挂钩，即可轻松实现字间距随字号等比例变化，避免小号字过松、大号字过紧的问题。