我需要在 javascript 中计算字母的确切大小。字母可以有不同的 font-size 或 font-family 属性等。
我尝试为此使用 div 元素，但这种方法只给出了 div 的大小，而不是字母。
<div style="display: inline; background-color: yellow; font-size: 53px; line-height:32px">A</div>
有人知道如何解决这个问题吗？
【问题讨论】：
标签： javascript html fonts size
这对于一般情况来说基本上是不可能的。字体字距调整将导致字母的可变“宽度”取决于操作系统、浏览器等，以及基于哪些字母彼此相邻。如果 os+browser 没有您指定的字体，则可能会发生字体替换。
也许用你所追求的更高层次的目标重新提出问题可能会导致提出其他可能更有成效的方法来解决你的问题？
【讨论】：
@Irongaze.com 是正确的，您的字体会根据条件具有不同的实际大小。
如果你想校准一个特定的字母，我相信element.getBoundingClientRect()会给你有用的坐标。确保完全重置您用作控制箱的容器。请注意，在不同的系统上，您可能会得到不同的结果。
请注意，这不会为您提供字母实际可见部分的大小，而是它确定的容器的大小。例如line-height，不会改变实际字母大小，但会影响其他字母的定位。请注意这一点。
如果您描述了您要解决的问题，这将对我们有所帮助。可能会有更好的解决方案。
【讨论】：
正如其他人所提到的，这是无法直接衡量的。但是你可以用一种更迂回的方式来解决它：将字母绘制到画布上并确定填充了哪些像素。
这是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;
}
请注意，这对抗锯齿很敏感——结果可能会偏离一个像素。
【讨论】：