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

I want to know what the em unit 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?


8 个解决方案



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


As one of the links states:


the "em" value is based on the width of the uppercase 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.


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。这仍然不同意Adobe源代码(其中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


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%; }。该页面已有六年了,我还没有阅读(数百篇)评论,因此我不知道它是否仍然相关。



The M-principle that an em is based on the letter M and is dependent on font is an often stated myth!! W3c em documentation very 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.

基于字母M并且依赖于字体的M原则是一个经常被说明的神话! W3c em文档非常简洁地描述了ems和像素的确切关系。使用字母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.


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.

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

  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.

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

  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. 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.
  2. (2)的一个主要警告是前单位的相对比率非常不稳定。在具有常量字体的同一浏览器中,相对比率可以随字体大小而变化。即使使用相同的字体大小和浏览器安全字体(例如Georgia),ex的相对比率也随浏览器而变化。如果你想要符合性,这是一个很好的理由,不使用ex单元。如果使用ex单元,则无法通过祖先链计算字体大小。



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 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测量,定义文本段落以有效地平衡空白区域,而不是页面布局或定位。



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




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


As quoted from that article:


We know that 1em is always equal 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 table for font sizes.




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".

以字母“M”命名,em单元在排版方面具有悠久的传统,用于测量水平宽度。例如,经常在美国文本( - )中找到的长划线被称为“em-dash”,因为它历史上具有与字母“M”相同的宽度。它的较窄的堂兄( - ),经常在欧洲文本中找到,同样被称为“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”(例如中文),但所有字体都有高度。因此,该术语表示字体的高度 - 而不是字母“M”的宽度。

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




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/




© 2014-2018 ITdaan.com 粤ICP备14056181号