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

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

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

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

祝你好运！

修改

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

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

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

1 个答案:

修改