在Javascript中测量ex中的px

Question

我想做什么

我想在px中测量 1ex。

我学到了什么

• 1ex是相对单位 - 等于正在使用的字体的小写字母“x”的高度：

描述情况的指导性图像：

链接到CSS规范：

http://www.w3.org/TR/css3-values/#font-relative-lengths

• window.getComputedStyle('foo',null).height或jQuery('#foo').height()无效 - 因为它们会返回边界框的高度。 e.g。

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

  最后一行给出true。

• 相关页面，但对我没有充分的信息：

  • jQuery/JavaScript: convert pixels to em in a easy way

  • How do I get a computed style?

  • JavaScript: convert ex to px

感谢任何信息！

编辑：

有些人认为这是骗局

JavaScript: convert ex to px

但没有实际答案：第一个答案仅解释了1ex的相对性，第二个答案甚至错误 - document.getElementById('upper').style.height返回"" // empty char。

Answer 1

我能想到的最佳方式：

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

您应该可以使用getImageData实现此目的。

或者你也可以尝试使用canvas方法measureText，它应该返回传入的文本字符串的宽度。考虑x通常非常对称，你可以得到相当准确的结果。

Answer 2

以下是当前CSS规范中关于ex单位的内容：

  

等于...字体使用的x高度。所谓的x高度是因为它经常等于小写的高度＆＃34; x＆＃34;。   但是，即使对于不包含＆＃34; x＆＃34;的字体，也会定义'ex'。

     

可以通过不同方式找到字体的x高度。某些字体包含x高度的可靠指标。如果可靠的字体指标   不可用，UA可以从a的高度确定x高度   小写字形。一种可能的启发式方法是看多远   小写的字形＆＃34; o＆＃34;延伸到基线以下，然后减去   来自其边界框顶部的值。在它的情况下   确定x高度不可能或不切实际，值为0.5em   必须假设。

所以＆＃39; x-height＆＃39;没有必要对实际字符做任何事情＆＃34; x＆＃34;，它只是一个字体指标，存储在字体文件中或由浏览器计算。测量它的最佳方法，IMO，是创建一个具有相同字体属性的测试块，设置为它，例如width: 10ex，然后测量它的clientWidth（或jQuery＆＃39; s { {1}}）。