如何找到特定大小的特定字体的ex值

Question

我想知道 helvetica 在 20px 时的 .ex 值。换句话说，在下面的网页中，"Hello" 的 ex 值以像素为单位是多少？（更一般地说，如何对任意大小的任意字体执行此操作？）

<html>
  <head>
    <style>
      body {
        font-family:Helvetica;
        font-size:20px;
      }
    </style>
  </head>
  <body>
    Hello
  </body>
</html>

===========

例如，在使用 MathJax 的 SVG 输出模式（指定 ex 中 SVG 相对于周围页面字体的高度）的一些复杂方法之后，我发现 Helvetica 在 20px 的 ex 值非常接近

10.467px

（safari 和 chrome 两者），而 Helvetica 在 21px 处的 ex 值接近

10.982px

（同样，safari 和 chrome 两者），等等。这些数字似乎与字体及其大小之外的任何其他参数无关。那么如何获得呢？

由于我获取这些ex值的方法很复杂，而且我获取的不是字体的"official"ex值，而是逆向工程的ex值，我想知道一个获取 "official" ex 值的非临时方式。

Answer 1

一种不使用任何外部库的方法是创建一个高度为 1ex 的块并测量它有多高。

var div = document.createElement('div'); div.style.fontSize = '1000px';
div.style.height = '1ex';
document.body.append(div);
var xHeight = div.scrollHeight;
document.body.removeChild(div);

console.log('1ex = 0.'+xHeight+'em');

虽然这种方法的问题是结果被四舍五入为整像素；因此，如果您使用 20px 的字体大小执行此操作，您将获得 10px 而不是您获得的 10.467。这就是我使用 1000px 的原因，所以结果至少有一定的精度。

另一种方法是使用 FontMetrics 等库。来自他们的主页：

<script src="FontMetrics.min.js" type="text/javascript"></script>

const metrics = FontMetrics({
  fontFamily: 'Roboto',
  // Optional (defaults) 
  fontWeight: 'normal',
  fontSize: 200,
  origin: 'baseline'
})

console.log('1ex = '+(-metrics.xHeight)+'em');

（无法制作此示例的实时片段，因为他们的 JS 文件没有 CDN。但我下载并测试了 JS 文件并且它可以工作。）

如何找到特定大小的特定字体的ex值

how to find ex value of specific font at specific size

html

css

fonts

font-size