使用javascript計算字母大小

我需要計算javascript中字母的確切大小。該字母可以具有不同的字體大小或字體家族屬性等。使用javascript計算字母大小

我試圖使用div元素爲此，但此方法只給出div的大小，而不是字母。

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

有沒有人知道如何解決這個問題？

來源

2012-02-10 Max

在您的示例中，您將字體大小設置爲53pts。爲什麼它會在屏幕上不同？ – 2012-02-10 13:22:07

@Larry K，並非所有字體都是等寬字體。字母「i」將決定與字母「w」不同的邊界矩形，這取決於字體系列，類型，字距等因素。 – 2012-02-10 13:54:48

你想解決什麼問題？ – egrunin 2012-02-10 17:23:16

這對於一般情況基本上是不可能的。字體字距會根據操作系統，瀏覽器等等導致字母變化的「寬度」，並根據哪些字母彼此相鄰。如果os +瀏覽器沒有您指定的字體，則可能會發生字體替換。

也許重新提出這個問題時，您所拍攝的更高級別的目標可能會導致您的問題提出其他方法，可能會更富有成效？

來源

2012-02-10 13:25:01

這就是爲什麼我需要在應用所有樣式後進行計算。取決於系統如何「繪製」，我想知道尺寸。 – Max 2012-03-12 14:10:43

@ Irongaze.com是正確的，你的字體，根據條件，將有不同的實際大小。

如果你想校準一個特定的字母，我相信element.getBoundingClientRect()會給你有用的座標。確保完全重置您用作控制箱的容器。注意在不同的系統上你可能會得到不同的結果。

jsFiddle

請注意，這不會給你的信的實際可見部分的大小，但它決定了容器的大小。例如，line-height不會更改實際的字母大小，但會影響其他字母的位置。請注意這一點。

如果您描述您正在嘗試解決的問題，它將有助於我們。可能有更好的解決方案。

來源

2012-02-10 13:52:12

我不能使用行高，因爲我不知道它的價值。字體大小可以隨時更改，並取決於系統。 – Max 2012-02-21 12:26:30

@Max，建議使用element.getBoundingClientRect（）。行高是一個反例，它將無法給出準確的結果。 – 2012-02-21 15:42:44

正如其他人所說，這是不可能直接衡量的。但是你可以以更迂迴的方式得到它：將字母繪製到畫布上，並確定填充哪些像素。

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

請注意，這對抗鋸齒敏感 - 結果可能會被像素關閉。

來源

2014-12-25 20:55:27 danvk

它也非常慢。不要使用這種技術，除非你緩存結果，並且只在頁面上做幾次......但非常酷。 :-) – 2015-01-22 23:49:01

該解決方案已經包含一個緩存，所以緩存結果自己將是毫無意義的。 – danvk 2015-01-23 16:30:03

使用javascript計算字母大小

回答

相關問題