小编Mic*_*ael的帖子

编辑：最初我只检查了桌面浏览器 - 但使用移动浏览器，情况更加复杂。

我遇到了一些浏览器及其文本渲染功能的奇怪问题，我不确定是否可以采取任何措施来避免这种情况。

Android 上的 WebKit 和（不太一致）Firefox 似乎正在使用 2D Canvas 库创建稍大的文本。我现在想忽略视觉外观，而是专注于文本测量，因为它们可以很容易地进行比较。

我使用了两种常用的方法来计算文本宽度：

• Canvas 2D API 和测量文本
• DOM方法

正如这个问题中所述：Calculate text width with JavaScript 但是，两者都会产生或多或少相同的结果（在所有浏览器中）。

function getTextWidth(text, font) {
    // if given, use cached canvas for better performance
    // else, create new canvas
    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;
};

function getTextWidthDOM(text, font) {
  var f = font || '12px arial',
      o = $('<span>' + …