是否可以使字母间距相对于字体大小并正确继承？

我的问题与此基本相同，但将“line-height”替换为“letter-spacing”：当继承相对行高时，它与元素的字体大小无关。为什么？我如何使其相对？

我的用例是这样的：

body {
    font-size: 18px;
    letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */
}

.small {
    font-size: 14px;
    /* letter-spacing is 1.2em of 18px instead of 14px */
}

我知道它不起作用的原因是计算值而不是指定值是继承的，所以我必须重新指定letter-spacing每次font-size变化。但我希望有一些类似于无单位值的东西line-height work.

当然我可以这样做：

* {
    letter-spacing: 1.2em;
}

但是我无法在某些元素上停止级联，就像我能够做到的那样line-height:

body {
    font-size: 18px;
    line-height: 1.5;
}

.normal-line-height {
    line-height: normal;
    /* all the descendants of this element will have a normal line-height */
}

我的意思是，当然，我总是可以做到这一点......

.normal-letter-spacing, .normal-letter-spacing * {
    letter-spacing: normal;
}

但它仍然没有我想要的那么优雅。我认为这个问题没有一个优雅的解决方案，但我想问一下，以防我遗漏了什么。

CSS 变量并未得到广泛支持，但可以解决问题：

body {
  font-size: 18px;
  --spacing: 1.2em;
}
.normal-letter-spacing { /* No need to select `.normal-letter-spacing *` */
  --spacing: normal;
}
body * {
  letter-spacing: var(--spacing);
}
.small {
  font-size: 14px;
}

<div>
  <p>Lorem ipsum</p>
  <p class="small">Lorem ipsum</p>
</div>
<hr />
<div class="normal-letter-spacing">
  <p>Lorem ipsum</p>
  <p class="small">Lorem ipsum</p>
</div>

它们之所以有效，是因为自定义属性计算到指定值：

计算值：用变量替换的指定值（但请参见 “无效变量”的散文）

因此，与发生的情况不同letter-spacing, 1.2em不转换为绝对长度。

然后，您可以告诉所有要使用的元素--spacing作为价值letter-spacing. So 1.2em将根据每个元素的字体大小在本地进行解析。

Unlike * { letter-spacing: 1.2em; }，该方法设置--spacing: 1.2em仅有一次，在body，并让它通过继承传播。因此，如果你想改变子树中的值，你只需要覆盖--spacing在根中。您不必选择所有子树。