line-height = font-size + 30px

Question

我有一台h1，我想使用clamp作为它的字体大小

line-height应为calc((fs / 100 * 30px) + fs)

fs是h1的字体大小

如果fs = 100，则应为calc((100 / 100 * 30px) + 100px)

但是如何在css中做到这一点呢？

Answer 1

问题是如何将行高设置为比字体大小大30px。

我们知道font-size，它是由一个CSS钳位定义的。这段代码创建了一个CSS变量--fs，并将其与CSS calc一起使用，将其增加30px作为line-height。

​

div {
  --fs: clamp(15px, 3vw, 50px);
  font-size: var(--fs);
  line-height: calc(var(--fs) + 30px);
}

<div>HELLO<br>GOODBYE</div>

​