更新 - 作为这个工作的一个例子，我在 Carota editor 中使用了这种技术。

继 ellisbben 的回答之后，这里是一个增强版本，用于从基线获取上升和下降，即与 Win32 的 GetTextMetric API 返回的 tmAscent 和 tmDescent 相同。如果您想使用不同字体/大小的跨度进行自动换行的文本运行，则需要这样做。

https://i.stack.imgur.com/h7tRn.png

上面的图像是在 Safari 中的画布上生成的，红色是画布被告知绘制文本的顶行，绿色是基线，蓝色是底部（所以红色到蓝色是全高）。

使用 jQuery 简洁：

var getTextHeight = function(font) {

  var text = $('<span>Hg</span>').css({ fontFamily: font });
  var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

  var div = $('<div></div>');
  div.append(text, block);

  var body = $('body');
  body.append(div);

  try {

    var result = {};

    block.css({ verticalAlign: 'baseline' });
    result.ascent = block.offset().top - text.offset().top;

    block.css({ verticalAlign: 'bottom' });
    result.height = block.offset().top - text.offset().top;

    result.descent = result.height - result.ascent;

  } finally {
    div.remove();
  }

  return result;
};

除了文本元素之外，我还添加了一个带有 display: inline-block 的 div，这样我就可以设置它的 vertical-align 样式，然后找出浏览器将它放在哪里。

因此，您返回一个包含 ascent、descent 和 height 的对象（为方便起见，它只是 ascent + descent）。为了测试它，值得拥有一个绘制水平线的函数：

var testLine = function(ctx, x, y, len, style) {
  ctx.strokeStyle = style; 
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + len, y);
  ctx.closePath();
  ctx.stroke();
};

然后你可以看到文本在画布上是如何相对于顶部、基线和底部定位的：

var font = '36pt Times';
var message = 'Big Text';

ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top'; // important!
ctx.font = font;
ctx.fillText(message, x, y);

// Canvas can tell us the width
var w = ctx.measureText(message).width;

// New function gets the other info we need
var h = getTextHeight(font);

testLine(ctx, x, y, w, 'red');
testLine(ctx, x, y + h.ascent, w, 'green');
testLine(ctx, x, y + h.height, w, 'blue');

---

浏览器开始支持 advanced text metrics，当它得到广泛支持时，这将使这项任务变得微不足道：

let metrics = ctx.measureText(text);
let fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

fontHeight 为您提供恒定的边界框高度，无论正在呈现的字符串如何。 actualHeight 特定于正在呈现的字符串。

规范：https://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-textmetrics-fontboundingboxascent 及其下方的部分。

支持状态（2017 年 8 月 20 日）：

Chrome 有一个标志（https://bugs.chromium.org/p/chromium/issues/detail?id=277215）。

Firefox 正在开发中 (https://bugzilla.mozilla.org/show_bug.cgi?id=1102584)。

Edge 不支持 (https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/30922861-advanced-canvas-textmetrics)。

节点画布（node.js 模块），主要支持（https://github.com/Automattic/node-canvas/wiki/Compatibility-Status）。

---

您可以通过检查大写字母 M 的长度来获得非常接近的垂直高度近似值。

ctx.font = 'bold 10px Arial';

lineHeight = ctx.measureText('M').width;

---

画布规范没有为我们提供测量字符串高度的方法。但是，您可以以像素为单位设置文本的大小，并且通常可以相对容易地找出垂直边界。

如果您需要更精确的内容，则可以将文本放到画布上，然后获取像素数据并计算出垂直使用了多少像素。这将相对简单，但效率不高。你可以做这样的事情（它可以工作，但会在画布上绘制一些你想要删除的文本）：

function measureTextHeight(ctx, left, top, width, height) {

    // Draw the text in the specified area
    ctx.save();
    ctx.translate(left, top + Math.round(height * 0.8));
    ctx.mozDrawText('gM'); // This seems like tall text...  Doesn't it?
    ctx.restore();

    // Get the pixel data from the canvas
    var data = ctx.getImageData(left, top, width, height).data,
        first = false, 
        last = false,
        r = height,
        c = 0;

    // Find the last line with a non-white pixel
    while(!last && r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                last = r;
                break;
            }
        }
    }

    // Find the first line with a non-white pixel
    while(r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                first = r;
                break;
            }
        }

        // If we've got it then return the height
        if(first != r) return last - first;
    }

    // We screwed something up...  What do you expect from free code?
    return 0;
}

// Set the font
context.mozTextStyle = '32px Arial';

// Specify a context and a rect that is safe to draw in when calling measureTextHeight
var height = measureTextHeight(context, 0, 0, 50, 50);
console.log(height);

对于 Bespin，他们确实通过测量小写“m”的宽度来伪造高度……我不知道这是如何使用的，我不推荐这种方法。这是相关的Bespin方法：

var fixCanvas = function(ctx) {
    // upgrade Firefox 3.0.x text rendering to HTML 5 standard
    if (!ctx.fillText && ctx.mozDrawText) {
        ctx.fillText = function(textToDraw, x, y, maxWidth) {
            ctx.translate(x, y);
            ctx.mozTextStyle = ctx.font;
            ctx.mozDrawText(textToDraw);
            ctx.translate(-x, -y);
        }
    }

    if (!ctx.measureText && ctx.mozMeasureText) {
        ctx.measureText = function(text) {
            ctx.mozTextStyle = ctx.font;
            var width = ctx.mozMeasureText(text);
            return { width: width };
        }
    }

    if (ctx.measureText && !ctx.html5MeasureText) {
        ctx.html5MeasureText = ctx.measureText;
        ctx.measureText = function(text) {
            var textMetrics = ctx.html5MeasureText(text);

            // fake it 'til you make it
            textMetrics.ascent = ctx.html5MeasureText("m").width;

            return textMetrics;
        }
    }

    // for other browsers
    if (!ctx.fillText) {
        ctx.fillText = function() {}
    }

    if (!ctx.measureText) {
        ctx.measureText = function() { return 10; }
    }
};

---

编辑：你在使用画布变换吗？如果是这样，您将不得不跟踪转换矩阵。以下方法应使用初始变换测量文本的高度。

编辑#2：奇怪的是，当我在这个 StackOverflow 页面上运行下面的代码时，它不会产生正确的答案；某些样式规则的存在完全有可能破坏此功能。

画布使用 CSS 定义的字体，因此理论上我们可以在文档中添加适当样式的文本块并测量其高度。我认为这比渲染文本然后检查像素数据要容易得多，而且它还应该尊重上升和下降。查看以下内容：

var determineFontHeight = function(fontStyle) {
  var body = document.getElementsByTagName("body")[0];
  var dummy = document.createElement("div");
  var dummyText = document.createTextNode("M");
  dummy.appendChild(dummyText);
  dummy.setAttribute("style", fontStyle);
  body.appendChild(dummy);
  var result = dummy.offsetHeight;
  body.removeChild(dummy);
  return result;
};

//A little test...
var exampleFamilies = ["Helvetica", "Verdana", "Times New Roman", "Courier New"];
var exampleSizes = [8, 10, 12, 16, 24, 36, 48, 96];
for(var i = 0; i < exampleFamilies.length; i++) {
  var family = exampleFamilies[i];
  for(var j = 0; j < exampleSizes.length; j++) {
    var size = exampleSizes[j] + "pt";
    var style = "font-family: " + family + "; font-size: " + size + ";";
    var pixelHeight = determineFontHeight(style);
    console.log(family + " " + size + " ==> " + pixelHeight + " pixels high.");
  }
}

您必须确保在您测量高度的 DOM 元素上获得正确的字体样式，但这非常简单；真的你应该使用类似的东西

var canvas = /* ... */
var context = canvas.getContext("2d");
var canvasFont = " ... ";
var fontHeight = determineFontHeight("font: " + canvasFont + ";");
context.font = canvasFont;
/*
  do your stuff with your font and its height here.
*/

---

如果您使用 context.font 定义字体，则文本的高度（以像素为单位）是否等于字体大小（以 pts 为单位）？

---

正如 JJ Stiff 建议的那样，您可以将文本添加到跨度，然后测量跨度的 offsetHeight。

var d = document.createElement("span");
d.font = "20px arial";
d.textContent = "Hello world!";
document.body.appendChild(d);
var emHeight = d.offsetHeight;
document.body.removeChild(d);

如HTML5Rocks所示

---

只是为了添加丹尼尔的答案（这很棒！而且绝对正确！），没有 JQuery 的版本：

function objOff(obj)
{
    var currleft = currtop = 0;
    if( obj.offsetParent )
    { do { currleft += obj.offsetLeft; currtop += obj.offsetTop; }
      while( obj = obj.offsetParent ); }
    else { currleft += obj.offsetLeft; currtop += obj.offsetTop; }
    return [currleft,currtop];
}
function FontMetric(fontName,fontSize) 
{
    var text = document.createElement("span");
    text.style.fontFamily = fontName;
    text.style.fontSize = fontSize + "px";
    text.innerHTML = "ABCjgq|"; 
    // if you will use some weird fonts, like handwriting or symbols, then you need to edit this test string for chars that will have most extreme accend/descend values

    var block = document.createElement("div");
    block.style.display = "inline-block";
    block.style.width = "1px";
    block.style.height = "0px";

    var div = document.createElement("div");
    div.appendChild(text);
    div.appendChild(block);

    // this test div must be visible otherwise offsetLeft/offsetTop will return 0
    // but still let's try to avoid any potential glitches in various browsers
    // by making it's height 0px, and overflow hidden
    div.style.height = "0px";
    div.style.overflow = "hidden";

    // I tried without adding it to body - won't work. So we gotta do this one.
    document.body.appendChild(div);

    block.style.verticalAlign = "baseline";
    var bp = objOff(block);
    var tp = objOff(text);
    var taccent = bp[1] - tp[1];
    block.style.verticalAlign = "bottom";
    bp = objOff(block);
    tp = objOff(text);
    var theight = bp[1] - tp[1];
    var tdescent = theight - taccent;

    // now take it off :-)
    document.body.removeChild(div);

    // return text accent, descent and total height
    return [taccent,theight,tdescent];
}

我刚刚测试了上面的代码，并且在 Mac 上最新的 Chrome、FF 和 Safari 上运行良好。

编辑：我也添加了字体大小并使用 webfont 而不是系统字体进行了测试 - 效果很棒。

---

我解决了这个问题 - 使用像素操作。

这是图形答案：

https://i.stack.imgur.com/mSH1c.png

这是代码：

    function textHeight (text, font) {

    var fontDraw = document.createElement("canvas");

    var height = 100;
    var width = 100;

    // here we expect that font size will be less canvas geometry
    fontDraw.setAttribute("height", height);
    fontDraw.setAttribute("width", width);

    var ctx = fontDraw.getContext('2d');
    // black is default
    ctx.fillRect(0, 0, width, height);
    ctx.textBaseline = 'top';
    ctx.fillStyle = 'white';
    ctx.font = font;
    ctx.fillText(text/*'Eg'*/, 0, 0);

    var pixels = ctx.getImageData(0, 0, width, height).data;

    // row numbers where we first find letter end where it ends 
    var start = -1;
    var end = -1;

    for (var row = 0; row < height; row++) {
        for (var column = 0; column < width; column++) {

            var index = (row * width + column) * 4;

            // if pixel is not white (background color)
            if (pixels[index] == 0) {
                // we havent met white (font color) pixel
                // on the row and the letters was detected
                if (column == width - 1 && start != -1) {
                    end = row;
                    row = height;
                    break;
                }
                continue;
            }
            else {
                // we find top of letter
                if (start == -1) {
                    start = row;
                }
                // ..letters body
                break;
            }

        }

    }
   /*
    document.body.appendChild(fontDraw);
    fontDraw.style.pixelLeft = 400;
    fontDraw.style.pixelTop = 400;
    fontDraw.style.position = "absolute";
   */

    return end - start;

}

---

一行答案

var height = parseInt(ctx.font) * 1.2; 

CSS "line-height: normal" 介于 1 和 1.2 之间

阅读 here 了解更多信息

---

这是我根据这里的其他一些答案所做的：

function measureText(text, font) { const span = document.createElement('span'); span.appendChild(document.createTextNode(text)); Object.assign(span.style, { font: font, margin: '0', padding: '0', border: '0', whiteSpace: 'nowrap' }); document.body.appendChild(span);常量 {宽度，高度} = span.getBoundingClientRect();跨度.删除（）；返回{宽度，高度}； } var font = "italic 100px Georgia"; var text = "abc 这是一个测试"; console.log（measureText（文本，字体））；

---

我正在编写一个终端模拟器，所以我需要在字符周围绘制矩形。

var size = 10
var lineHeight = 1.2 // CSS "line-height: normal" is between 1 and 1.2
context.font = size+'px/'+lineHeight+'em monospace'
width = context.measureText('m').width
height = size * lineHeight

显然，如果您想要角色占用的确切空间量，那将无济于事。但它会为您提供某些用途的良好近似值。

---

我有点震惊，这里没有正确的答案。无需进行估计或猜测。此外，字体大小不是字体边界框的实际大小。字体高度取决于您是否有上升和下降。

要计算它，请使用 ctx.measureText() 并将 actualBoundingBoxAscent 和 actualBoundingBoxDescent 相加。这会给你实际的大小。您还可以将 font* 版本加在一起以获得用于计算元素高度等内容的大小，但严格来说并不是字体实际使用空间的高度。

常量文本 = 'Hello World'; const canvas = document.querySelector('canvas');画布.宽度 = 500;画布.高度 = 200; const ctx = canvas.getContext('2d'); ctx.font = '100px Arial, Helvetica, sans-serif'; // top 对 fillText() 计算很关键 // 可以使用其他位置，但是需要调整计算 ctx.textBaseline = 'top'; ctx.textAlign = '中心';常量指标 = ctx.measureText(text);常量宽度=metrics.width；常量实际高度 = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; const fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent; ctx.fillStyle = '#00F'; // 蓝色 ctx.fillRect((canvas.width / 2) - (width / 2), (canvas.height / 2) - (fontHeight / 2), width, fontHeight); ctx.fillStyle = '#0F0'; // 绿色 ctx.fillRect((canvas.width / 2) - (width / 2), (canvas.height / 2) - (actualHeight / 2), width, actualHeight); // canvas.height / 2 - actualHeight / 2 让您到达 // 绿色框的顶部。您必须添加actualBoundingBoxAscent 才能移位 // 它恰到好处 ctx.fillStyle = '#F00'; // red ctx.fillText(text, canvas.width / 2, canvas.height / 2 - actualHeight / 2 + metrics.actualBoundingBoxAscent); <画布>

---

我已经实现了一个很好的库，用于使用 HTML 画布测量文本的确切高度和宽度。这应该做你想要的。

https://github.com/ChrisBellew/text-measurer.js

---

这是一个简单的功能。不需要图书馆。

我编写了这个函数来获取相对于基线的上限和下限。如果 textBaseline 设置为 alphabetic。它所做的是创建另一个画布，然后在那里绘制，然后找到最顶部和最底部的非空白像素。这就是上限和下限。它将它作为相对值返回，因此如果高度为 20 像素，并且基线下方没有任何内容，则上限为 -20。

您必须为其提供字符。否则，显然它会给你 0 高度和 0 宽度。

用法：

alert(measureHeight('40px serif', 40, 'rg').height)

这是功能：

function measureHeight(aFont, aSize, aChars, aOptions={}) {
    // if you do pass aOptions.ctx, keep in mind that the ctx properties will be changed and not set back. so you should have a devoted canvas for this
    // if you dont pass in a width to aOptions, it will return it to you in the return object
    // the returned width is Math.ceil'ed
    console.error('aChars: "' + aChars + '"');
    var defaultOptions = {
        width: undefined, // if you specify a width then i wont have to use measureText to get the width
        canAndCtx: undefined, // set it to object {can:,ctx:} // if not provided, i will make one
        range: 3
    };

    aOptions.range = aOptions.range || 3; // multiples the aSize by this much

    if (aChars === '') {
        // no characters, so obviously everything is 0
        return {
            relativeBot: 0,
            relativeTop: 0,
            height: 0,
            width: 0
        };
        // otherwise i will get IndexSizeError: Index or size is negative or greater than the allowed amount error somewhere below
    }

    // validateOptionsObj(aOptions, defaultOptions); // not needed because all defaults are undefined

    var can;
    var ctx; 
    if (!aOptions.canAndCtx) {
        can = document.createElement('canvas');;
        can.mozOpaque = 'true'; // improved performanceo on firefox i guess
        ctx = can.getContext('2d');

        // can.style.position = 'absolute';
        // can.style.zIndex = 10000;
        // can.style.left = 0;
        // can.style.top = 0;
        // document.body.appendChild(can);
    } else {
        can = aOptions.canAndCtx.can;
        ctx = aOptions.canAndCtx.ctx;
    }

    var w = aOptions.width;
    if (!w) {
        ctx.textBaseline = 'alphabetic';
        ctx.textAlign = 'left'; 
        ctx.font = aFont;
        w = ctx.measureText(aChars).width;
    }

    w = Math.ceil(w); // needed as i use w in the calc for the loop, it needs to be a whole number

    // must set width/height, as it wont paint outside of the bounds
    can.width = w;
    can.height = aSize * aOptions.range;

    ctx.font = aFont; // need to set the .font again, because after changing width/height it makes it forget for some reason
    ctx.textBaseline = 'alphabetic';
    ctx.textAlign = 'left'; 

    ctx.fillStyle = 'white';

    console.log('w:', w);

    var avgOfRange = (aOptions.range + 1) / 2;
    var yBaseline = Math.ceil(aSize * avgOfRange);
    console.log('yBaseline:', yBaseline);

    ctx.fillText(aChars, 0, yBaseline);

    var yEnd = aSize * aOptions.range;

    var data = ctx.getImageData(0, 0, w, yEnd).data;
    // console.log('data:', data)

    var botBound = -1;
    var topBound = -1;

    // measureHeightY:
    for (y=0; y<=yEnd; y++) {
        for (var x = 0; x < w; x += 1) {
            var n = 4 * (w * y + x);
            var r = data[n];
            var g = data[n + 1];
            var b = data[n + 2];
            // var a = data[n + 3];

            if (r+g+b > 0) { // non black px found
                if (topBound == -1) { 
                    topBound = y;
                }
                botBound = y; // break measureHeightY; // dont break measureHeightY ever, keep going, we till yEnd. so we get proper height for strings like "`." or ":" or "!"
                break;
            }
        }
    }

    return {
        relativeBot: botBound - yBaseline, // relative to baseline of 0 // bottom most row having non-black
        relativeTop: topBound - yBaseline, // relative to baseline of 0 // top most row having non-black
        height: (botBound - topBound) + 1,
        width: w// EDIT: comma has been added to fix old broken code.
    };
}

relativeBot、relativeTop 和 height 是返回对象中有用的东西。

这是示例用法：

这是一个标题< /h1>

这是一个段落。

relativeBot 和 relativeTop 就是您在此图片中看到的内容：

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

https://www.whatwg.org/specs/web-apps/current-work/images/baselines.png

---

有趣的是 TextMetrics 只有宽度而没有高度：

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#textmetrics

你能像这个例子一样使用 Span 吗？

http://mudcu.be/journal/2011/01/html5-typographic-metrics/#alignFix

---

首先你需要设置一个字体大小的高度，然后根据字体高度的值来判断你的文字当前高度是多少，横行文字，当然高度一样字体需要累加，如果文本不超过最大文本框高度，则全部显示，否则，只显示文本框内的文本。高价值需要你自己的定义。预设高度越大，需要显示和截取的文字高度越大。

After the effect is processed(solve)

Before the effect is processed( unsolved)

  AutoWrappedText.auto_wrap = function(ctx, text, maxWidth, maxHeight) {
var words = text.split("");
var lines = [];
var currentLine = words[0];

var total_height = 0;
for (var i = 1; i < words.length; i++) {
    var word = words[i];
    var width = ctx.measureText(currentLine + word).width;
    if (width < maxWidth) {
        currentLine += word;
    } else {
        lines.push(currentLine);
        currentLine = word;
        // TODO dynamically get font size
        total_height += 25;

        if (total_height >= maxHeight) {
          break
        }
    }
}
if (total_height + 25 < maxHeight) {
  lines.push(currentLine);
} else {
  lines[lines.length - 1] += "…";
}
return lines;};

---

我发现 JUST FOR ARIAL 找到边界框高度的最简单、最快和最准确的方法是使用某些字母的宽度。如果您打算在不让用户选择不同字体的情况下使用某种字体，则可以进行一些研究以找到适合该字体的正确字母。

您的浏览器不支持 HTML5 canvas 标签。

注意： Internet Explorer 8 及更早版本不支持 canvas 标签。

---

设置字体大小可能不切实际，因为设置

ctx.font = ''

将使用由 CSS 定义的字体以及任何嵌入的字体标签。如果您使用 CSS 字体，您不知道高度是多少，以编程方式使用 measureText 方法，这是非常短视的。但另一方面，IE8 确实返回宽度和高度。

---

这适用于 1) 多行文本以及 2) 甚至在 IE9 中！

<div class="measureText" id="measureText">
</div>


.measureText {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Arial;
  position: fixed;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: pre-wrap;
  line-height: 100%;
}

function getTextFieldMeasure(fontSize, value) {
    const div = document.getElementById("measureText");

    // returns wrong result for multiline text with last line empty
    let arr = value.split('\n');
    if (arr[arr.length-1].length == 0) {
        value += '.';
    }

    div.innerText = value;
    div.style['font-size']= fontSize + "px";
    let rect = div.getBoundingClientRect();

    return {width: rect.width, height: rect.height};
};

---

我知道这是一个已回答的老问题，但为了将来参考，我想添加一个简短的、最小的、仅限 JS（无 jquery）的解决方案，我相信人们可以从中受益：

var measureTextHeight = function(fontFamily, fontSize) 
{
    var text = document.createElement('span');
    text.style.fontFamily = fontFamily;
    text.style.fontSize = fontSize + "px";
    text.textContent = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ";
    document.body.appendChild(text);
    var result = text.getBoundingClientRect().height;
    document.body.removeChild(text);
    return result;
};

---

我在我的一个项目中修补了 CanvasRenderingContext2D.measureText() 以包含文本的实际高度。它是用 vanilla JS 编写的，并且具有零依赖性。

/*
 * Monkeypatch CanvasRenderingContext2D.measureText() to include actual height of the text
 */
; (function (global) {
  "use strict";

  var _measureText = global.CanvasRenderingContext2D.prototype.measureText;

  global.CanvasRenderingContext2D.prototype.measureText = function () {
    var textMetrics = _measureText.apply(this, arguments);

    var _getHeight = function (text) {
      var $span = global.document.createElement("span");
      var spanTextNode = global.document.createTextNode(text);
      $span.appendChild(spanTextNode);
      $span.setAttribute("style", `font: ${this.font}`);

      var $div = global.document.createElement("div");
      $div.setAttribute("style", "display: inline-block; width: 1px; height: 0; vertical-align: super;");

      var $parentDiv = global.document.createElement("div");
      $parentDiv.appendChild($span);
      $parentDiv.appendChild($div);

      var $body = global.document.getElementsByTagName("body")[0];
      $body.appendChild($parentDiv);

      var divRect = $div.getBoundingClientRect();
      var spanRect = $span.getBoundingClientRect();
      var result = {};

      $div.style.verticalAlign = "baseline";
      result.ascent = divRect.top - spanRect.top;

      $div.style.verticalAlign = "bottom";
      result.height = divRect.top - spanRect.top;

      result.descent = result.height - result.ascent;

      $body.removeChild($parentDiv);

      return result.height - result.descent;
    }.bind(this);

    var height = _getHeight(arguments[0]);

    global.Object.defineProperty(textMetrics, "height", { value: height });

    return textMetrics;
  };

})(window);

你可以像这样使用它

ctx.font = "bold 64px Verdana, sans-serif"; // Automatically considers it as part of height calculation
var textMetrics = ctx.measureText("Foobar");
var textHeight = textMetrics.height;

---

parseInt(ctx.font, 10)

例如

let text_height = parseInt(ctx.font, 10)

例如返回 35

---

在正常情况下，以下应该起作用：

var can = CanvasElement.getContext('2d');          //get context
var lineHeight = /[0-9]+(?=pt|px)/.exec(can.font); //get height from font variable

---

这太疯狂了……文字的高度就是字体大小……你们没有人读过文档吗？

context.font = "22px arial";

这会将高度设置为 22px。

唯一的原因有一个..

context.measureText(string).width

是因为除非它知道您想要宽度的字符串，否则无法确定字符串的宽度，但是对于使用字体绘制的所有字符串..高度将为 22px。

如果您使用除 px 之外的其他测量值，那么高度仍然是相同的，但是使用该测量值，所以您最多需要做的就是转换测量值。

---

近似解决方案：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "100px Arial";
var txt = "Hello guys!"
var wt = ctx.measureText(txt).width;
var height = wt / txt.length;

这将是等宽字体的准确结果。

---