CSS/Sass：为基线设置不同的字体大小——公式

Question

我正在尝试了解如何在 CSS 中将文本设置为基线。我发现我需要在字体大小更改后立即调整行高。

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

例如，一个 mixin 是这样的：

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

Fiddle（使用检查元素查看样式）

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

但是这里到底计算了什么，为什么它会起作用？为什么一定要用ceil？

Answer 1

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

但是，如果你想根据字体大小改变行高，只需使用 em，例如：

line-height: 1.6em;

这会将行高设置为 1.6 * 无论字体大小是多少。

为了更准确地了解公式......只需进行总和

line-height: ceil(26 / 24) * (24 / 26); line-height: ceil(1.08) * (0.92); line-height: 2 * 0.92; line-height: 1.84615;