CSS中h1用clamp设置字体大小时如何按指定公式动态计算行高

实现方法 #

你可以通过CSS自定义属性（变量）绑定字体大小和行高的计算逻辑，代码如下：

h1 {
  /* 可自行调整clamp的三个参数适配你的响应式需求，示例为最小32px、最大96px，随视口宽度动态变化 */
  --h1-fs: clamp(32px, 5vw + 0.5rem, 96px);
  font-size: var(--h1-fs);
  line-height: calc((var(--h1-fs) / 100 * 30px) + var(--h1-fs));
}

简化方案 #

你给出的公式可直接化简为1.3倍字体大小，这种场景下不需要自定义属性也能实现，代码更简洁：

h1 {
  font-size: clamp(32px, 5vw + 0.5rem, 96px);
  /* 无单位行高默认相对于当前元素的font-size计算，和你要求的公式效果完全一致 */
  line-height: 1.3;
}

内容的提问来源于stack exchange，提问作者5alidshammout