Question

我想知道，例如，helvetica的.ex值为20px。换句话说，在下面的网页中，“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值的方法确实令人费解，并且我没有获得字体的“官方”ex值，而是获得反向工程的ex值，我想知道非ad-hoc获得“官方”前价值的方式。

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值

1 个答案: