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基線網格 - 爲什麼線條高度變小而字體變大？

回答

相關問題