有一些 DOM 方法用于计算文本宽度；但是在本教程中，我们将找到相应地完成任务的最佳方法。
我们可以使用 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")); //

measureText() 方法

measureText() 方法返回一个对象，该对象以像素为单位表示给定文本的宽度。
它可用于在将文本写入画布之前检测文本宽度。

这种方法有一些优点：

• 它比其他基于 DOM 的方法更简洁、更安全，因为它不会改变全局状态。
• 通过修改更多画布文本属性（例如 textAlign 和 textBaseline），可以进一步自定义。

将文本添加到 DOM，请考虑内边距、边距和边框。

该方法提供亚像素精度，例如：结果在某些浏览器上是浮点数；对其他人则不然。

在这种情况下，我们应该对结果运行 Math.floor（或者 Math.ceil）以避免不一致。

与其他方法相比，Canvas.measureText() 方法是最快的。