使用javascript计算字母大小

Question

我需要计算javascript中字母的确切大小。该字母可以具有不同的字体大小或字体家族属性等。

我试图使用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不会更改实际的字母大小，但会影响其他字母的位置。请注意这一点。

如果您描述您正在尝试解决的问题，它将有助于我们。可能有更好的解决方案。

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; 
} 

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