Javascript 通过定义的字体计算字符串长度的最快、最准确的方法

我使用以下两种方法计算文本长度（使用定义的字体系列和大小），单位为像素：

方法1：

函数getTextWidth（文本、字体）{ var canvas=getTextWidth.canvas | |（getTextWidth.canvas=document.createElement（“canvas”）； var context=canvas.getContext（“2d”）； context.font=font； var metrics=context.measureText（text）； 返回度量。宽度； } log（getTextWidth（'abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz'，'Bold 12px Open Sans`）

---

如果第二种方法为您提供了更大的长度，那么它可以计算标记之间的缩进。使用

.trim（）

切断多余的空间

var test = document.getElementById("Test").trim();

或

您缺少一个

在变量宽度=（test.clientWidth+1）+“px”的末尾

您能提供您得到的长度吗？
canvas元素与纯html不一致。我将使用第一个示例的一个变体，根据getBoundingClientRect（）更改clientWidth。width以获得小数，与浏览器检查器显示的尺寸一致

我还在window.load中进行了调用，以确保在获得大小之前显示dom和每个样式


window.onload=function（）{
var测试=document.getElementById（“测试”）；
var width=test.getBoundingClientRect（）.width；
控制台。原木（宽度）；
}
#测试{
位置：绝对位置；
字体系列：“开放式Sans”，无衬线；
空白：nowrap；
字体大小：12px；
字体大小：粗体；
}

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvxyz
var width = (test.trim().clientWidth + 1) + "px"