CSS/萨斯 : Setting different font-sizes to a baseline – formula

Question

我想了解如何在 CSS 中将文本设置为基线。我发现我需要在 font-size 改变后立即调整行高。

一些在线工具和 Sass mixins 正是这样做的，但我想了解这个公式。

例如，一个 mixin 是这样做的:

line-height: ceil($font-size / $page-line-height) * ($page-line-height / $font-size);

Fiddle (使用检查元素查看样式)

对于 26px 的 font-size，根据 $page-line 计算出 1.84615 的行高-24px 的高度。

但是这里到底计算了什么，为什么有效？为什么需要使用ceil？

Answer 1

不确定我完全理解这个问题。我不知道为什么那个 mixin 使用那个公式，如果你问我，它看起来过于复杂，而且一点也不标准。

但是，如果您想根据字体大小更改行高，只需使用 ems，例如:

line-height: 1.6em;

这会将行高设置为 1.6 * 无论 font-size 是多少。

为了更精确地了解公式....只需求和

行高:ceil(26/24) * (24/26);
行高:ceil(1.08) * (0.92)；
行高:2 * 0.92；
行高:1.84615;