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:1.3 !important;

Answer 3

line-height可以px设置，em的，每个单位将适合。

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

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

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

只是基于因子的线高来证明未来。

Answer 4

建议使用的line-height的无量纲数（以防止继承问题）。计算出的行高将是无单位值乘以元素字体大小的乘积。

可能更方便的使用font CSS快捷方式，像这样（来自Mozilla的CSS文档所采取的示例）：

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

为什么该无量纲值是优选的，这里给出一个很好的例子：Prefer unitless numbers for line-height values 。