canvas.measureText获取的TextMetrics与DOM渲染尺寸不符，如何获取正确值？

我在挂载样式为position: absolute/fixed; display: block;的DOM元素到文档之前，用以下代码获取文本的TextMetrics：

function getTextMetrics(txt, font) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    context.font = font;
    const tm = context.measureText(txt);
    return tm;
} 

但返回的tm对象里拿不到文本实际渲染的宽高，关键信息缺失，而且TextMetric的字段数值和元素挂载后获取的.clientWidth/.clientHeight完全不相等。

以下是Chrome中的测试数据：

.clientWidth: 82
.clientHeight: 20

tm:
width : 73.2734375
fontBoundingBoxAscent : 16
fontBoundingBoxDescent : 3

原因及解决方法 #

宽度差异的核心原因 #

canvas的measureText().width是纯文本字符的绘制宽度，只计算字符本身占据的空间；而DOM元素的clientWidth是元素的可视宽度，包含了元素的内边距（padding），如果元素设置了边框（border）且box-sizing为content-box，还会算上边框宽度，另外浏览器的字体渲染策略细微差异也会导致数值偏差。

高度差异的核心原因 #

DOM的clientHeight受line-height影响极大——浏览器默认的line-height通常会比字体本身的字形高度（fontBoundingBoxAscent + fontBoundingBoxDescent）要大，比如测试里16+3=19，但clientHeight是20，就是默认line-height的额外间距导致的。而canvas返回的字形边界高度只是字体设计的原始高度，不包含行高的额外空间。

让两者数值对齐的方法 #

• 宽度匹配：首先要保证canvas的font属性和DOM元素的字体样式完全一致（包括font-size、font-family、font-weight、font-style等）；然后把DOM元素的内边距、边框等额外空间从clientWidth中扣除，或者在canvas计算时手动加上这些额外值，就能得到和clientWidth接近的结果。
• 高度匹配：不要用canvas的字形边界总和，而是获取DOM元素的line-height值（如果是百分比/相对值，要转换成绝对像素值），用这个值作为文本高度的参考；或者直接读取DOM元素的offsetHeight并扣除边框，就能和实际渲染高度对齐。

内容的提问来源于stack exchange，提问作者Leo