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

What is the em font-size unit? How much is it in pixels?

提问by sushil bharwani

I want to know what the emunit is, and how much 1em is when converted to pixels (px). I also read somewhere about some IE bug, to overcome which body font-size should be set to something, but couldn't follow much. Can somebody explain that in detail?

我想知道em单位是什么，转换为像素时 1em 是多少（px）。我还在某处阅读了一些关于 IE 错误的内容，以克服应将哪个正文字体大小设置为某些内容，但不能遵循太多。有人可以详细解释一下吗？

回答by egrunin

Despite what you may read elsewhere, there is nodirect relationship between em and px.

尽管你可能在别处读到过，但em 和 px 之间没有直接关系。

As one of the links states:

正如链接之一所述：

the "em" value is based on the width of the uppercase M

“em”值基于大写字母 M 的宽度

So it's going to be different for every font. A narrow font might have the same height (in px) as an extended font, but the em size will be different.

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

EDIT three years later:

三年后编辑：

There are now lots of sources which say that 1em = font size (in px). That is, when you write font-size:16px, then 1em = 16px. This still doesn't agree with the Adobe source (which says 1em = the font size in pt), but in either case it seems bizarre; the em size would be far too large with condensed fonts and far too small with extended fonts.

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

I'm going to make some test pages and see for myself.

我将制作一些测试页并亲眼看看。

And also:

并且：

I see that nobody (including me) actually answered the question (which was kind of hidden):

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

I also read somewhere about some ie bug and to overcome that set body font-size to something

我还在某处阅读了一些 ie 错误并克服了将正文字体大小设置为某些内容的问题

According to this page, you need to add this to your css: html{ font-size:100%; }. That page is six years old, and I haven't read the (hundreds) of comments, so I don't know if it's still relevant.

根据此页面，您需要将其添加到您的 css: 中html{ font-size:100%; }。该页面已有六年历史，我还没有阅读（数百条）评论，所以我不知道它是否仍然相关。

回答by Mark Willis

The M-principle that an em is based on the letter M and is dependent on font is an often stated myth!! W3c em documentationvery succinctly describes exactly how ems and pixels relate. Using the letter M to compute font-sizes is at the very least overly complicated and unnecessary.

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

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement.

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

Here are the salient points.

以下是要点。

1. Without ancestor magnification, 1em is exactly equal to the pixel font-size attribute.

2. Ancestor magnification with x-ems or x-percent means you just multiply by the obvious ratios x or x/100. Thus a simple java-script loop will calculate exact font sizes, assuming: (1) no C.S.S to frustrate java-script; and (2) some ancestor has it's font size set in absolute units. This is the computed value the documentation is talking about. A hand calculation can get around C.S.S., but an absolute unit must still be found in the ancestor chain.

3. Since ems measure width you can always compute the exact font size by creating a div that is 1000 ems long and dividing its client-Width property by 1000. Since ems are rounded to the nearest thousandth you need 1000 ems to avoid erroneous pixel truncation.

4. You probably can create a font where the M-principle fails since em is based on the font-size attribute not on the actual font. Suppose you have a weird font where M is 1/3 the size of the other characters and you have a font size of 10 pixels. Don't you think the pixel font-size guarantees maximal character height in some way and so the M will not be 10 pixels and all other characters 30 pixels?

1. 在没有祖先放大的情况下，1em 正好等于像素字体大小属性。

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

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

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

Warning

警告

1. A major caveat to (2) is that the relative ratio of the ex unit is wildly unstable. In the same browser with constant font, the relative ratio can change with font size. The relative ratio of ex also changes with the browser even with the same font size and browser safe font such as Georgia. This is a pretty good reason not to ever use the ex unit if you want conformity. If the ex unit is used, it is impossible to compute the font-size through the ancestor chain.

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

回答by TALLBOY

It's calculated off of whatever your body font size is. You can use a pixel to em converter to find out exactly what it is on your site.

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

PxToEm

像素转换

回答by Hap Jewell

em is a measurement used in printed typography originally (as per wikipedia). Here are some things to consider: if em is defined as 12pt type, then an em is 12/72 inch of a printed page; but if you define an em as 16px, its width in inch is dependent on the resolution of the media. (Note: 72ppi to 120ppi resolution used to be considered a "safe browser" standard before the advent of mobile devices.) So, when your users are on a 300px width device, 1em as 16px is a lot of "real estate". Best use of em measurements, in my opinion, are defining paragraphs of texts to balance white space effectively, not for page layout or positioning.

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

回答by John Doe

Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash".

The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M".

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

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

From "The amazing em unit and other best practices" https://www.w3.org/WAI/GL/css2em.htm

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

回答by leivajd

this link can help you http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

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

As quoted from that article:

正如那篇文章所引用的：

We know that 1em is alwaysequal to the font size of the parent element, therefore:

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

For your bookmarks: Pixel to ems conversion tablefor font sizes.

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

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

对于您的书签：字体大小的Pixel 到 ems 转换表。

回答by simshaun

EM is a unit of measurement proportional to the point size of a font.

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

回答by Tom Vervoort

em is almost the same as percentage, I suggest to read http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

em 几乎与百分比相同，我建议阅读http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/