在IE和Chrome中，.getComputedTextLength()返回的值不同。

Question

我在编写一些小程序时遇到了问题。有一个SVG textNode：

textMeasureNode.style.cssText 
"font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 22px; font-style: oblique; font-weight: normal; fill: #333333;" 
and 
textMeasureNode.textContent 
"Q1"

当我调用这个函数时：

textMeasureNode.getComputedTextLength() 

我在IE和Chrome中得到了不同的值。

IE:

49.269996643066406

Chrome:

29.34765625

看起来，font-style: oblique影响了这些结果。有人遇到过这个问题吗？

- Ellie

Answer 1

我已经在Chrome、Safari和Firefox中进行了一些测试，每个浏览器呈现的长度略有不同。你肯定看到了一些意外的行为。这不是特定于Open Sans或它是斜体的（不同的样式在不同的浏览器中会以不同的方式改变长度）。即使包含备用字体，在Chrome中长度也会显著改变（但在FireFox或Safari中不会）。我最好的猜测是这是由于每个浏览器选择在SVG中呈现字体的方式不同，因此最好不要让任何东西依赖于特定的长度。

在SVG规范中，getComputedTextLength()被定义为：

从渲染此元素内所有字符的所有advance值的总和，包括字形（水平或垂直）上的advance值，属性“kerning”、“letter-spacing”和“word-spacing”的影响以及对“tspan”元素上的属性“dx”和“dy”的调整。

因此，有很多可变的因素可以影响长度，如果你尝试一个相当长的句子（所以有很多字形、空格等），差异更加明显。虽然在不同的浏览器之间变化不理想，但考虑到构建Web浏览器的所有限制，这可能是合理的行为。

- Katharine Osborne