是否可以相对于字体大小进行字母间距并正确继承? [英] 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
每次 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变量没有得到广泛的支持,但可以做到这一点:
< 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 thefont-size
changes. But I'm hoping there's something similar to how unitless values inline-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 ofletter-spacing
. So1.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 thebody
, 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屋!