我试图了解如何在CSS中将文本设置为基线。我发现一旦字体大小改变,我就需要调整行高。
一些在线工具和Sass mixins就是这样做的,但我想了解这个公式。
例如,一个mixin就是这样的:
line-height: ceil($font-size / $page-line-height) * ($page-line-height / $font-size);
Fiddle(使用inspect元素查看样式)
对于font-size
26px
,1.84615
的行高基于$page-line-height
的{{1}}计算。
但究竟是什么计算在这里,为什么它有效?为什么有必要使用24px
?
答案 0 :(得分:0)
不确定我完全理解这个问题。我不知道为什么mixin使用那个公式,如果你问我,它看起来过于复杂,而且根本没有标准。
但是,如果您想根据字体大小更改行高,请使用ems,例如:
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;