【问题标题】:What is the em font-size unit? How much is it in pixels?什么是 em 字体大小单位?它是多少像素?
【发布时间】:2011-05-27 07:45:54
【问题描述】:

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

【问题讨论】:

    标签: css font-size


    【解决方案1】:

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

    PxToEm

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        【解决方案3】:

        【讨论】:

          【解决方案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' 属性的值 本身,在这种情况下,它指的是 父元素的字体大小。它 可用于垂直或水平 测量。

            以下是重点。

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

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

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

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

            警告

            1. (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

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 2011-11-02
                  • 2012-05-15
                  • 1970-01-01
                  • 2014-06-04
                  • 1970-01-01
                  • 2010-11-06
                  • 2015-04-07
                  • 1970-01-01
                  相关资源
                  最近更新 更多