javascript - 如何使用 Javascript 计算文本宽度？

Question

我需要使用 JavaScript 计算我的文本。但是找不到简单有效的方法。请帮助我:) 提前致谢。

标签： javascripttext

Answer 1

嗨 :) 最近我发现了一个非常简单方便的方法。只需使用 JavaScript 中的 Canvas.measureText() 方法来正确检测文本宽度：

function displayTextWidth(text, font) {
  let canvas = displayTextWidth.canvas || (displayTextWidth.canvas = document.createElement("canvas"));
  let context = canvas.getContext("2d");
  context.font = font;
  let metrics = context.measureText(text);
  return metrics.width;
}
console.log("Text Width: " + displayTextWidth("This is demo text!", "italic 19pt verdana")); //

代码和信息取自 W3docs 的本教程。