Canvas.measureText 在浏览器上的差异巨大

Question

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

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

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>' + text + '</span>')
            .css({'font': f, 'float': 'left', 'white-space': 'nowrap'})
            .css({'visibility': 'hidden'})
            .appendTo($('body')),
      w = o.width();

  return w;
}

我使用 Google 字体对小提琴进行了一些修改，它允许对一组示例字体执行文本测量（请先等待网络字体加载，然后再单击测量按钮）：

http://jsfiddle.net/aj7v5e4L/15/ （更新为强制字体粗细和样式）

在各种浏览器上运行它显示了我遇到的问题（使用字符串“S”）：

所有桌面浏览器之间的差异都很小 - 只有 Safari 比较突出 - 我所看到的差异在 1% 到 4% 左右，具体取决于字体。所以它并不大 - 但超出了我的计算。

更新：也测试了一些移动浏览器 - 在 iOS 上，所有浏览器都与 Safari 处于同一水平（在后台使用 WebKit，所以毫不奇怪） - 而 Android 上的 Firefox 则非常断断续续。

我读过，并非所有浏览器（例如较旧的 IE）都真正支持亚像素精度 - 但即使舍入也无济于事 - 因为我最终可能会具有不同的宽度。

不使用 webfont，而仅使用上下文附带的标准字体，会在 Chrome 和 Safari 之间返回完全相同的测量值 - 所以我认为它仅与 webfonts 相关。

我对我现在能做什么感到有点困惑 - 因为我认为我只是做错了什么，因为我没有在网上找到任何与此相关的内容 - 但小提琴是尽可能简单的。我真的花了一整天的时间 - 所以你们现在是我唯一的希望。

我脑子里有一些丑陋的解决方法（例如，在受影响的浏览器上渲染文本小 4％） - 我真的很想避免。

Answer 1

Safari（和其他一些）似乎确实支持获取子像素级别，但不支持绘图......

当您将 font-size 设置为 时9.5pt，该值将转换为 12.6666... px。

尽管 Safari 确实为此返回了高精度值：

console.log(getComputedStyle(document.body)['font-size']);
// on Safari returns 12.666666984558105px oO

body{font-size:9.5pt}

它无法以非整数字体大小正确绘制，而不仅仅是在画布上：

console.log(getRangeWidth("S", '12.3px serif'));
// safari: 6.673828125 | FF 6.8333282470703125
console.log(getRangeWidth("S", '12.4px serif'));
// safari: 6.673828125 | FF 6.883331298828125
console.log(getRangeWidth("S", '12.5px serif'));
// safari 7.22998046875 | FF 6.95001220703125
console.log(getRangeWidth("S", '12.6px serif'));
// safari 7.22998046875 | FF 7

// High precision DOM based measurement
function getRangeWidth(text, font) {
  var f = font || '12px arial',
      o = $('<span>' + text + '</span>')
            .css({'font': f, 'white-space': 'nowrap'})
            .appendTo($('body')),
      r = document.createRange();
 r.selectNode(o[0]);
 var w = r.getBoundingClientRect().width;
 o.remove();
 return w;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

因此，为了避免这些怪癖， 请尝试始终使用px带有整数值的单位。