Javascript中px中的度量ex 我想做什么

我想用px来测量1ex

我所学到的

• 1ex是一个相对的单位，等于所用字体小写字母“x”的高度：

描述情况的说明性图像：

链接到CSS规范：

• window.getComputedStyle（'foo'，null）.height

  或

  jQuery（'#foo'）.height（）

  没有帮助，因为它们返回其边界框的高度。e、 g

  X
  x
  var upper=$（'#upper'）.height（）；
  var lower=$（'#lower'）.height（）；
  console.log（上===下）；
  

  最后一行给出

  true

• 相关页面，但未向我提供全部信息：

欢迎提供任何信息

编辑：

有些人认为这是一场骗局

---

但是有没有实际的答案：第一个答案只解释了

1ex

的相关性，第二个答案甚至是错误的--

document.getElementById（'upper'）.style.height

返回

“//空字符

我能想到的最好办法是：

• 用白色填充画布
• 在画布上用黑色画这封信
• 测量第一个非白色像素到最后一个非白色像素之间的垂直距离

您应该能够使用

getImageData

实现这一点

---

或者，您也可以尝试使用canvas方法

measureText

，该方法应返回传入的文本字符串的宽度。考虑到

x

通常是相当对称的，仅此一点就可以得到相当准确的结果。

以下是当前CSS规范对

ex

单位的说明：

等于使用的x高度的。。。字体。之所以称x高度，是因为它通常等于小写字母“x”的高度。 但是，即使对于不包含“x”的字体，也定义了“ex”

字体的x高度可以通过不同的方式找到。某些字体包含x高度的可靠指标。如果是可靠的字体度量 如果不可用，UAs可能会根据 小写字形。一个可能的启发式方法是查看 小写字母“o”的标志符号延伸到基线下方，并减去 从其边界框顶部删除该值。在这种情况下 不可能或不实际确定x高度，值为0.5em 必须假设

---

因此，“x-height”与实际字符“x”没有任何关系，它只是一个字体度量，存储在字体文件中或由浏览器计算。IMO，最好的测量方法是创建一个具有相同字体属性的测试块，设置为它，例如，

width:10ex

，然后测量它的

clientWidth

（或者jQuery的

width（）

）。

1ex在windows和linux中都等于6个像素，在大多数浏览器中都是默认值。所以应该不难理解，即使它是有史以来最无用的单位。我把id误认为是字体大小的css属性的指示。Large表示大写X，而small表示小写。我没听清楚。无论如何，谢谢！为了避免混淆，我重新命名了这些ID。它显然是重复的。如果旧问题的答案不充分，我们应该尝试改进它们，而不是产生新的问题副本，导致同一个问题多次被问到不同的答案集。当我粘贴上面的链接时，我知道“ex”的规范。。但是谢谢，你的解决方案确实有效。（虽然我说的不是“宽度”，而是“高度”。）只是给未来的访问者的一个提示，

clientWidth

和jQuery的

.width（）

将值舍入。如果需要精确测量，请改用。还要注意，ex与px的比率在高度和宽度之间可能不同……Jthrope，这不是因为上面提到的四舍五入，所以不同值的比率略有不同，而不是不同的方向？这不适用于没有字母“x”的字体。正如伊利亚在下面提到的，单位ex与实际的“x”无关。

<div id="upper"> X </div>
<div id="lower"> x </div>
<script>
   var upper = $('#upper').height();
   var lower = $('#lower').height();
   console.log(upper === lower);
</script>