我想知道 helvetica 在 20px 时的 .ex 值。换句话说，在下面的网页中，“Hello”的 ex 值是多少，以像素为单位？ (更一般地说，如何对任意大小的任意字体执行此操作？)
<html>
<head>
<style>
body {
font-family:Helvetica;
font-size:20px;
}
</style>
</head>
<body>
Hello
</body>
</html>
===========
10.467 像素
(safari 和 chrome 都有)，而 Helvetica 在 21px 的 ex 值接近
10.982 像素
(同样，safari 和 chrome 都有)，等等。这些数字似乎与字体及其大小之外的任何其他参数无关。那么如何获取呢？
由于我获取这些 ex 值的方法非常复杂，而且我不是在获取字体的“官方”ex 值，而是逆向工程 ex 值，所以我想知道一个非临时的获取“官方”前值的方法。
最佳答案
一种不使用任何外部库的方法是创建一个高度为 1ex 的 block 并测量它有多高。
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。这就是我使用 1000 像素的原因，所以结果至少有一定的精度。
另一种方法是使用库，例如 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 文件并且它有效。)
关于html - 如何找到特定大小的特定字体的ex值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49649160/