css - 线高的 EM

Question

我想将我的新网站从像素转换为 em。我的问题是，我是否也应该将 ems 应用于我的文本行高属性？

Answer 1

假设“转换为 ems”意味着使用em单位为font-size，那么您应该line-height以一种也适应字体大小的方式进行设置。这两个属性密切相关，如果您将其中一个设置为 inem而将另一个（例如）设置为pxor pt，则如果更改字体大小，页面将中断。因此，将本质上不同的单位用于本质上连接的属性将违背“使用 ems”的想法。

例如，如果您设置font-size: 1.5emand line-height: 18px，那么事情将取决于元素父级的字体大小，如果该大小比预期的小得多或大得多，则可能会出错。

无论您使用em单位还是纯数字是一个不同的问题。仅使用数字，如line-height: 1.2，主要等同于使用em单位，如line-height: 1.2em。但不同的是，当line-height被继承时，继承的是纯数字，而不是计算值。

例如，如果一个内部元素的字体大小是其父元素的两倍，那么继承的值1.2意味着使用其自身字体大小的 1.2 倍，这是可以的。但是如果父级有line-height: 1.2em，那么子级将继承一个 1.2 倍于父级字体大小的值——这比它自己的字体大小要小得多。

有关更多解释结束示例，请参见line-height @Mozilla Developer Network

Answer 2

line-height可以设置在px, em's 中，每个单元都适合。

line-height如果您使用因子/乘数，则效果最好并且面向未来，这意味着没有单位，而只是一个与您的字体大小相乘的数字。

.foo {
  font-size: 1.3em; /* based that 1em == 10px */
  line-height: 1.3; /* 16.9px line-height */
}

所以，是的，你可以，回答你的问题：不，你不应该。

只需选择基于因子的 line-height 即可。

Answer 3

建议对 line-height 使用无单位数（以防止继承问题）。然后，计算的 line-height 将是无单位值乘以元素的 font size 的乘积。

使用 CSS 快捷方式可能更方便font，如下所示（示例取自 Mozilla CSS 文档）：

div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

此处给出了为什么首选无单位值的一个很好的例子：Preferless numbers for line-height values。