因为字体大小(字符串中包含中英文)、编码等原因,所以我们不能直接通过字符串长度 x 每个字符的fontSize 知道一个字符串所占的实际宽度。
较为准确的测量方式有如下两种:
把文本放入到一个dom元素中,随后获取dom元素的clientWidth 或者 offsetWidth(注意要盒模型,过滤掉padding 和 border等,此外内联元素的clientWidth始终为0);
通过cavans获取:
function getTextWidth(text, font) {
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}