CSS基线网格-为什么线条高度变小而字体尺寸变大？

尝试调整黄金网格系统中的可缩放基线网格：

以下是相关的CSS（除非我遗漏了什么）：

我不明白的是：为什么字号越大，行高越小

我试图建立一个我自己的基线网格，但我似乎无法推断出导致这种模式的方程式

很明显，字体大小源自经典

目标÷上下文=结果

如果你在字号上做这个计算，它就行了。e、 g.对于h2：

26px÷16px=1.625em

但是，这一数学公式在线的高度上是错误的

---

奇怪的是为什么小班的线高和大班的线高一样，h1，h2。。。然而，这是我最不关心的

通过brilliant@jonkorpi（黄金网格系统的创建者）：

计算行高时，上下文将成为该元素的字体大小

例如，上面例子中h2后面的数学将分解如下：

.large, h2, h1 {
    /* 
    target font size: 26px
    target line height: 36px

    font-size = 26 ÷ 16 x 1em
    line-height = 36 ÷ 26 x 1em
    */

    font-size: 1.625em;
    line-height: 1.3846153846153846em;
    }

或者，换句话说，要计算线高度，可以使用以下等式：

目标行高度÷元素的字体大小=结果

.large, h2, h1 {
    /* 
    target font size: 26px
    target line height: 36px

    font-size = 26 ÷ 16 x 1em
    line-height = 36 ÷ 26 x 1em
    */

    font-size: 1.625em;
    line-height: 1.3846153846153846em;
    }