相对于基线的CSS`line-height`（使用JS？）

Question

我试图做一些非常简单的事情，但我在失败和论坛之间度过了一天......

我想调整字体以匹配我的基线。在InDesign上只需点击一下，但在CSS中它看起来就像是世界上最难的事情......

让我们举一个理性值的简单例子。

在这张图片上，我每20px有一个基线。

所以对于我的body我这样做：

body { font-size: 16px; line-height: 20px; }

一切都很完美。我的段落与基线匹配。

但是当我编写我的h脚本时，我的body {font-size: 16px; line-height: 20px; } h1 { font-size: 5em; line-height: 1.25em; } h2 { font-size: 4em; line-height: 1.25em; } h3 { font-size: 3em; line-height: 1.25em; } h4 { font-size: 2em; line-height: 1.25em; } 不再匹配基线...

h1 { font-size: 84px; line-height: 100px; }
h2 { font-size: 68px; line-height: 80px; }
h3 { font-size: 52px; line-height: 60px; }
h4 { font-size: 36px; line-height: 40px; }

P.S。 20/16 = 1.25em

在我的检查器中，computed返回预期值：

line-height

由于var gap = height_of_the_line - height_of_the_font; var bottom_gap = gap / 2; var baseline = y * bottom_gap; 似乎是相对于字母高度的中间，我的标题与我的网格底部不匹配。 我想达到那样的结果：

有没有办法在不使用填充和边距的情况下实现这一点。我做了一些测试，但是非常混乱。我正在寻找一种干净的方式。我很确定我们可以用JavaScript做点什么..

喜欢

autoplay=1

你怎么了？ （我不能编写JS脚本，但这样的问题给了我学习的意愿。）