行高 = 字体大小 + 30px

【问题标题】：line-height = font-size + 30px行高 = 字体大小 + 30px
【发布时间】：2021-12-29 00:48:54
【问题描述】：

我有一个h1，我想使用clamp 作为它的字体大小
line-height 应该是 calc((fs / 100 * 30px) + fs)
fs 是 h1 的字体大小
如果 fs = 100 那么它应该是calc((100 / 100 * 30px) + 100px)
但是如何在 css 中做到这一点？

【问题讨论】：

你能告诉我们你正在为 h1 设置字体大小吗？
我做了：font-size: clamp(15px, 3vw, 50px)

标签： html css responsive-design

【解决方案1】：

问题询问如何将 line-height 设置为比 font-size 大 30px。

我们知道字体大小，它由 CSS 钳位定义。这个 sn-p 使用这个值创建一个 CSS 变量 --fs 并使用它和一个 CSS calc 来增加 30px 的行高。

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

&lt;div&gt;HELLO&lt;br&gt;GOODBYE&lt;/div&gt;

【讨论】：

谢谢，但是行高应该是calc((var(--fs) / 100 * 40px) + var(--fs))，但是css不行（100px/100），所以第一个var(--fs)应该是100而不是100px
这在 CSS 中是做不到的。行高如何变成字体大小加上字体大小的一部分。这似乎很有意义并且可以很好地扩展。