Question

我需要在javascript中计算字母的确切大小。该字母可以有不同的font-size或font-family属性等。

我尝试使用div元素，但是这个方法只给出了div的大小，而不是字母。

<div style="display: inline; background-color: yellow; font-size: 53px; line-height:32px">A</div>

有人知道如何解决这个问题吗？

Answer 1

对于一般情况，这基本上是不可能的。字体字距调整将导致字母的变量“宽度”取决于操作系统，浏览器等，并且基于哪些字母彼此相邻。如果os +浏览器没有您指定的字体，则可能会发生字体替换。

也许重新问一下你所拍摄的更高级别目标的问题是否可能导致提出其他可能更有成效的问题？

Answer 2

@ Irongaze.com是正确的，根据条件，您的字体将具有不同的实际尺寸。

如果您想校准特定字母，我相信element.getBoundingClientRect()会为您提供有用的坐标。务必完全重置您用作控制箱的容器。请注意，在不同的系统上，您可能会得到不同的结果。

jsFiddle

请注意，这不会给出字母实际可见部分的大小，而是它确定的容器大小。例如，line-height不会更改实际的字母大小，但会影响其他字母“＃{1}}。定位。请注意这一点。

如果您描述了您要解决的问题，它将对我们有所帮助。可能有更好的解决方案。

Answer 3

正如其他人所提到的，这是不可能直接衡量的。但是你可以用更迂回的方式得到它：将字母画在画布上并确定填充了哪些像素。

这里是demo that does this。肉就是这个功能：

/**
 * Draws a letter in the given font to an off-screen canvas and returns its
 * size as a {w, h, descenderH} object.
 * Results are cached.
 */
function measureLetter(letter, fontStyle) {
  var cacheKey = letter + ' ' + fontStyle;
  var cache = measureLetter.cache;
  if (!cache) {
    measureLetter.cache = cache = {};
  }
  var v = cache[cacheKey];
  if (v) return v;

  // Create a reasonably large off-screen <canvas>
  var cnv = document.createElement('canvas');
  cnv.width = '200';
  cnv.height = '200';

  // Draw the letter
  var ctx = cnv.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.font = fontStyle;
  ctx.fillText(letter, 0.5, 100.5);

  // See which pixels have been filled
  var px = ctx.getImageData(0, 0, 200, 200).data;
  var minX = 200, minY = 200, maxX = 0, maxY = 0;
  var nonZero = 0;
  for (var x = 0; x < 200; x++) {
    for (var y = 0; y < 200; y++) {
      var i = 4 * (x + 200 * y);
      var c = px[i] + px[i + 1] + px[i + 2] + px[i + 3];
      if (c === 0) continue;
      nonZero++;
      minX = Math.min(x, minX);
      minY = Math.min(y, minY);
      maxX = Math.max(x, maxX);
      maxY = Math.max(y, maxY);
    }
  }

  var o = {w: maxX - minX, h: maxY - minY, descenderH: maxY - 100};
  cache[cacheKey] = o;
  return o;
}

请注意，这对抗锯齿很敏感 - 结果可能会被像素关闭。

用javascript计算字母大小

3 个答案: