固定宽度字符的确切宽度和高度

Question

我正在处理一个文本小部件，该小部件需要固定字体才能显示表格等。 为了能够计算适合给定窗口的字符数，我需要具有所用字体的高度和宽度。 我创建了一个快速函数，该函数通过创建一个具有单个字符的元素来进行计算并获得该元素的高度和宽度。 问题在于此宽度和高度是整数而不是浮点数。 例如，如果我在带有1em fontSize和fontFamily monospace chrome上调用此函数。 我得到宽度8和高度15。高度值是正确的，但宽度实际上是7.14左右……这似乎并不多，但是当一行上开始有100个字符时，您可以看到偏移量大于80像素

有没有办法以某种可靠的方式获得准确的值？

而且请不要使用jQuery。

这是函数：

function getCharDimensions(fontFamily, fontSize) {
    var body = document.getElementsByTagName('body');
    var el = document.createElement("span");
    el.style.position = "absolute";
    el.style.top = "-100%"
    el.style.fontFamily = fontFamily;
    el.style.fontSize = fontSize;
    el.innerHTML = "x";
    body[0].appendChild(el);
    var dimensions = {
        height: el.offsetHeight,
        width: el.offsetWidth
    };
    el.parentNode.removeChild(el);
    return dimensions;
}

Answer 1

您不考虑排版的跟踪和字距调整。 所有字符都具有定义的跟踪，以将其调整为其他字符并且更具可读性。

在这种情况下，这并不是唯一影响您的因素，这是因为CSS无法在设备像素宽度为1的普通屏幕中读取小数像素。因此1.5px不存在。

如果检测到图案，则可以应用字体大小并删除字母中的跟踪，并且可以应用7.14px因为您可以用它求和，并且比现在更准确。

祝好运！

编辑

作为一项改进，您可以定义要查找的宽度和高度的字符，因为i宽度小于m宽度（是的，我知道您正在使用等宽字符，但这是一个很好的改进）。

 function getCharDimensions(character, fontFamily, fontSize) {
       //stuff
       el.innerHTML = character;
       //stuff
  }