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

尝试从金色的网格系统适应可缩放的基线网格：https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css CSS基线网格 - 为什么线条高度变小而字体变大？

这里的相关CSS（除非我失去了一些东西）：

/* 
* 
* Zoomable baseline grid 
* type size presets 
* 
*/ 
body { 
    /* 16px/24px */ 

    font-size: 1em; 
    line-height: 1.5em; 
} 
.small { 
    /* 13px/18px */ 

    font-size: 0.8125em; 
    line-height: 1.3846153846153846em; 
} 
.normal, h3 { 
    /* 16px/24px */ 

    font-size: 1em; 
    line-height: 1.5em; 
    /* 24 */ 

} 
.large, h2, h1 { 
    /* 26/36px */ 

    font-size: 1.625em; 
    line-height: 1.3846153846153846em; 
} 
.huge { 
    /* 42px/48px */ 

    font-size: 2.625em; 
    line-height: 1.1428571428571428em; 
} 
.massive { 
    /* 68px/72px */ 

    font-size: 4.25em; 
    line-height: 1.0588235294117647em; 
} 
.gigantic { 
    /* 110px/120px */ 

    font-size: 6.875em; 
    line-height: 1.0909090909090908em; 
}

我想不通的是 ：为什么字体大小越来越大，字体高度越来越小？

我想使自己的基线网格，但我似乎无法外推导致这种模式的公式。

显然从经典

目标÷上下文中的字体大小的结果=导致

如果你这样做对字体大小的数学，它的作品了。例如为H2：

26px 16px的÷= 1.625em

但数学分解为行高度。

陌生人仍然是为什么.small类的行高与.large，h1，h2的行高一样...但是，这是我最担心的问题。

来源

2012-02-12 jon

经由辉煌@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; 
    }

，或者换一种方式，来计算的line-height可以用下面的公式：

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

来源

2012-02-12 18:36:05 jon

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

回答

相关问题