为何CSS中的em单位在letter-spacing场景下未按预期生效？

核心原因 #

letter-spacing 属性中使用的 em 单位，参考的是元素自身的 font-size，而非父元素（如 html）的字体大小。这是你修改 html 或 :root 的 font-size 后，字间距没有变化的根本原因。

代码验证 #

看你的代码示例：

• .wide 类的元素设置了 font-size: 24px，所以 letter-spacing: .5em 实际计算为 24px * 0.5 = 12px，和 html 的 font-size: 2px 无关。
• .narrow 类的元素设置了 font-size: 48px，letter-spacing: -.15em 实际计算为 48px * (-0.15) = -7.2px，同样不受根元素字体大小影响。

解决方案：使用rem单位 #

如果希望 letter-spacing 跟随根元素（html/:root）的字体大小变化，应该使用 rem 单位（rem 始终相对于根元素的 font-size）。

修改后的CSS示例：

html {
  font-size: 16px; /* 修改这个值，letter-spacing会同步变化 */
}

h1 {
  font-family: 'COUTUREBold';
  margin: 0;
  font-size: 38px;
}

.wide {
  font-size: 24px;
  letter-spacing: .5rem; /* 改为rem */
}

.narrow {
  font-size: 48px;
  letter-spacing: -.15rem; /* 改为rem */
}

此时调整 html 的 font-size，.wide 和 .narrow 的字间距会按比例变化。

补充说明 #

若想让 letter-spacing 基于父元素字体大小，需要保证子元素没有单独设置 font-size，此时子元素的 em 才会参考父元素的字体大小。但你的代码中每个 h1 都单独定义了 font-size，所以父元素的字体大小不会被参考。

内容的提问来源于stack exchange，提问作者imkrishnasarathi