是否可以相对于字体大小进行字母间距并正确继承？ [英] Is it possible to have letter-spacing relative to the font-size and inherit properly?

问题描述

我的问题基本上和这个一样，但用letter-spacing替换line-height：当相对行高被继承时，它不是相对于元素的字体大小。为什么？我如何使它相对？

我的用例如下所示：

  body {
 font-size：18px; 
 letter-spacing：1.2em; / *我希望字母间距相对于整个文档的字体大小，至少在我重写它之前* / 
} 
 
 .small {
 font- size：14px; 
 / * letter-spacing是18px的1.2em而不是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; 
 / *此元素的所有后代将具有正常的行高* / 
} 
  

我的意思是，SURE，我总是可以这么做......

  .normal-letter-spacing，。正常字母间距* {
 letter-spacing：normal; 
} 
  

但它还没有我想要的那么优雅。我不认为这个问题有一个很好的解决方案，但我要求在我缺少某些东西的情况下。 解决方案

CSS变量没有得到广泛的支持，但可以做到这一点：

< font-size：18px; --spacing：normal;} body * {letter-spacing：var（ - ）; --spacing：normal;}正常字母间距{/ *不需要选择` ）; <$ c $>

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

b

他们的工作原因是自定义属性计算为指定值：

计算值：指定值b

因此，不同于字母间距所发生的情况， 1.2em 未被转换为绝对长度。

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

与<$ c $不同c> * {letter-spacing：1.2em; } ，这个方法只在 body 中设置 - spacing：1.2em ，并让它通过继承传播。因此，如果您想在子树中更改该值，则只需在根中覆盖 - spacing 。你不必选择所有的子树。

My question is basically the same as this one, but replace "line-height" with "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?

My use case is like this:

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 */
}

I know that the reason it doesn't work is that the computed value, and not the specified value, is inherited, so I have to re-specify the letter-spacing every time the font-size changes. But I'm hoping there's something similar to how unitless values in line-height work.

Sure I can do this:

* {
    letter-spacing: 1.2em;
}

But then I can't stop the cascading at some element, like I would be able to with 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 */
}

I mean, SURE, I could always do this...

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

But it's still not as elegant as I would like. I don't think there's an elegant solution to this problem, but I'm asking in case I'm missing something.

解决方案

CSS variables are not widely supported but would do the trick:

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>

They work because the value of a custom property computes to the specified value:

Computed value: specified value with variables substituted (but see prose for "invalid variables")

Therefore, unlike what happens with letter-spacing, 1.2em is not transformed to an absolute length.

Then, you can tell all elements to use --spacing as the value of letter-spacing. So 1.2em will be resolved locally with respect of the font size of each element.

Unlike * { letter-spacing: 1.2em; }, this approach sets --spacing: 1.2em only once, in the body, and lets it propagate by inheritance. Therefore, if you want to change that value in a subtree, you only need to override --spacing in the root. You don't have to select all the subtree.

这篇关于是否可以相对于字体大小进行字母间距并正确继承？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！