大佬教程收集整理的这篇文章主要介绍了html – 是否可以相对于font-size具有字母间距并正确继承?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的用例是这样的:
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: 1.2em; }
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; }
但它仍然没有我想要的那么优雅.我不认为这个问题有一个优雅的解决方案,但我会问,以防我错过了什么.
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的值计算到指定值:
因此,与字母间距不同,1.2em不会转换为绝对长度.
然后,您可以告诉所有元素使用–spacing作为字母间距的值.因此,1.2em将在本地解析每个元素的字体大小.
不像* {letter-spacing:1.2em; },这种方法在体内设置–spacing:1.2em只有一次,并让它通过继承传播.因此,如果要在子树中更改该值,则只需在根中覆盖–spacing.您不必选择所有子树.
以上是大佬教程为你收集整理的html – 是否可以相对于font-size具有字母间距并正确继承?全部内容,希望文章能够帮你解决html – 是否可以相对于font-size具有字母间距并正确继承?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。