线高的 EM

Posted 2023-03-06

【中文标题】线高的 EM

【英文标题】：EM's for line-height

【发布时间】：2013-02-14 11:23:50

【问题描述】：

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

【问题讨论】：

是的，你可以。 em 是 CSS line-height 属性的有效单位

接受的答案指出了为什么不应该使用任何带有 line-height 的单位：因为 line-height 只计算一次并且结果被继承。要使用字体大小调整行高，请移除该单位。

【参考方案1】：

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

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

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

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

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

【讨论】：

如果我使用 ems 作为字体大小，是否建议将 line-height 转换为 ems？

【参考方案2】：

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

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

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

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

更多解释结束示例见line-height @ Mozilla Developer Network

【讨论】：

感谢line-height: 1.5em 和line-height: 1.5 之间的区别，它为我节省了很多搜索时间！

【参考方案3】：

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

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

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

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

【讨论】：

很棒的技巧和 MDN 资源！我一直想知道line-height 属性和ems 的复杂性。有了那个链接和ems 的背景，我变得更聪明了。