什么是 em 字体大小单位？它是多少像素？

Posted 2023-03-06

【中文标题】什么是 em 字体大小单位？它是多少像素？

【英文标题】：What is the em font-size unit? How much is it in pixels?

【发布时间】：2011-05-27 07:45:54

【问题描述】：

我想知道em 的单位是什么，以及 1em 转换为像素时是多少 (px)。我还在某处读到了一些 IE 错误，以克服应该将哪个 body font-size 设置为某些东西，但不能遵循太多。谁能详细解释一下？

【参考方案1】：

它是根据您的正文字体大小计算得出的。您可以使用像素到 em 转换器来准确了解您网站上的内容。

PxToEm

【参考方案2】：

EM 是与字体的磅值成比例的度量单位。

【参考方案3】：

em和百分比差不多，建议阅读http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

【参考方案4】：

尽管您可能在其他地方读到过，但 em 和 px 之间没有直接关系。

正如其中一个链接所述：

“em”值是基于 在大写M的宽度上

因此，每种字体都会有所不同。窄字体可能与扩展字体具有相同的高度（以 px 为单位），但 em 大小会有所不同。

三年后编辑：

现在有很多消息来源说 1em = 字体大小（以 px 为单位）。也就是说，当你写font-size:16px，那么1em = 16px。这仍然与 Adob​​e 的源代码不一致（其中说 1em = pt 中的字体大小），但无论哪种情况，它都显得很奇怪； em 大小对于压缩字体来说太大了，而对于扩展字体来说太小了。

我要制作一些测试页面，自己看看。

还有：

我看到没有人（包括我）真正回答了这个问题（这有点隐藏）：

我还在某处读到了一些错误，并克服了设置 body font-size 的问题

根据this page，您需要将其添加到您的css：html font-size:100%; 。那一页有六年了，我还没有读过（数百）个cmets，所以我不知道它是否仍然相关。

【讨论】：

这真的很新。是否有一些我可以阅读的来源。

en.wikipedia.org/wiki/Em_(typography)，引用了 Adob​​e (adobe.com/uk/type/topics/glossary.html)。但是现在我读了它，该页面还说“Em传统上定义为当前面和点大小中大写M的宽度。它更恰当地定义为简单的当前点大小。例如，在12点type，em是12个点的距离。”

你有没有看到提到一些错误，用于将正文字体大小设置为 100% 以使 em 正常工作

这不适用于 CSS 和计算机显示器。阅读：v1.jontangerine.com/log/2007/09/… in css - em 和 px 实际上是相关的。基本上 1em 等于当前元素继承的字体大小。例如您可以为 body 元素设置 font-size，并让所有其他元素在其 font-size 中使用“em”，它将与您在 body 中设置的大小相关。这是让你的字体响应的好方法（你需要做的就是改变你的身体的大小一次......）

【参考方案5】：

此链接可以帮助您 http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

引用自那篇文章：

我们知道 1em 总是等于父元素的字体大小，因此：

1 ÷ parent font-size × required pixel value = em value

对于您的书签：Pixel to ems conversion table 用于字体大小。

【参考方案6】：

em 基于字母 M 并且依赖于字体的 M 原则是一个经常被提及的神话！ W3c em documentation 非常简洁地描述了 em 和像素之间的关系。使用字母 M 来计算字体大小至少过于复杂和不必要。

“em”单位等于计算的 'font-size' 属性的值 使用它的元素。这 例外是当 'em' 出现在 'font-size' 属性的值 本身，在这种情况下，它指的是 父元素的字体大小。它 可用于垂直或水平 测量。

以下是重点。

没有祖先放大倍数，1em 正好等于像素字体大小属性。

x-ems 或 x-percent 的祖先放大倍率意味着您只需乘以明显的比率 x 或 x/100。因此，一个简单的 java-script 循环将计算准确的字体大小，假设： (1) 没有 C.S.S 来阻止 java-script； (2) 某些祖先的字体大小设置为绝对单位。这是文档正在讨论的计算值。手工计算可以绕过 C.S.S.，但必须在祖先链中找到绝对单位。

由于 em 测量宽度，您始终可以通过创建一个 1000 em 长的 div 并将其 client-Width 属性除以 1000 来计算确切的字体大小。由于 em 舍入到最接近的千分之一，因此您需要 1000 em避免错误的像素截断。

您可能可以创建 M 原则失败的字体，因为 em 基于 font-size 属性而不是实际字体。假设您有一个奇怪的字体，其中 M 是其他字符大小的 1/3，并且您的字体大小为 10 像素。你不认为像素字体大小以某种方式保证了最大字符高度，因此 M 不会是 10 像素，所有其他字符都是 30 像素吗？

警告

(2) 的主要警告是 ex 单位的相对比率非常不稳定。 在相同字体的浏览器中，相对比例可以随字体大小而变化。即使使用相同的字体大小和浏览器安全字体（例如 Georgia），ex 的相对比例也会随着浏览器的变化而变化。如果您想要一致性，这是一个很好的理由，永远不要使用前单元。如果使用 ex 单位，则无法通过祖先链计算 font-size。

【参考方案7】：

em 最初是用于印刷排版的度量（根据***）。这里有一些需要考虑的事情：如果 em 被定义为 12pt 类型，那么 em 是 12/72 英寸的打印页面；但如果您将 em 定义为 16px，其宽度（英寸）取决于媒体的分辨率。 （注意：在移动设备出现之前，72ppi 到 120ppi 的分辨率曾经被认为是“安全浏览器”标准。）因此，当您的用户使用 300px 宽度的设备时，1em 作为 16px 是很多“不动产”。在我看来，em 度量的最佳用途是定义文本段落以有效平衡空白，而不是用于页面布局或定位。

【参考方案8】：

以字母“M”命名的 em 单位在排版中具有悠久的传统，用于测量水平宽度。例如，美国文本中经常出现的长破折号 (--) 被称为“em-dash”，因为它在历史上与字母“M”具有相同的宽度。其较窄的表亲 (-)，经常出现在欧洲文本中，同样被称为“破折号”。

多年来，“em”的含义发生了变化。并非所有字体都包含字母“M”（例如中文），但所有字体都有高度。因此，该术语指的是字体的高度，而不是字母“M”的宽度。

来自“令人惊叹的 em 单元和其他最佳实践”https://www.w3.org/WAI/GL/css2em.htm