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

我的问题与该问题基本相同，但将“line-height”替换为“letter-spacing”:When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?

我的用例是这样的:

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中的无单位值的工作方式。

当然，我可以这样做:

* {
    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>

之所以起作用，是因为custom property的值计算为指定的值:



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

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

与* { letter-spacing: 1.2em; }不同，此方法在--spacing: 1.2em中仅设置一次body，并使其通过继承进行传播。因此，如果要在子树中更改该值，则只需覆盖根目录中的--spacing。您不必选择所有子树。