EM是线高

Question

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

Answer 1

假设“转换为ems”意味着将em单位用于font-size，那么您应该以适合字体大小的方式设置line-height。这两个属性密切相关，如果您在em和px或pt中设置其中一个（例如），那么如果字体大小发生变化，页面将会中断。因此，它会违背“使用ems”的想法，使用基本上不同的单位来实现基本连接的属性。

例如，如果设置font-size: 1.5em和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中，每个单位都适合。

如果你使用因子/乘数，意味着没有单位，只有一个数字乘以你的字体大小，那么

line-height效果最好，面向未来。

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

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

只需将基于因子的行高进行未来验证。

Answer 3

建议使用无单位数作为行高（以防止继承问题）。然后，计算出的行高将无单位值乘以元素字体大小的乘积。

使用font CSS快捷方式可能更方便，例如（从Mozilla CSS文档中获取的示例）：

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

这里给出了一个很好的例子，说明为什么无单位值是可取的：Prefer unitless numbers for line-height values。

Answer 4

您可以尝试line-height:1.3 !important;