javascript - .getComputedTextLength() 在 IE 和 Chrome 中返回不同的值

Question

我在写一些小程序时遇到了一个问题。有一个 SVG 文本节点:

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影响这些结果。有没有人遇到过这个问题？

Answer 1

我已经在 Chrome、Safari 和 Firefox 中对此进行了一些测试，并且每个渲染的长度都略有不同。您肯定会看到一些意想不到的行为。它不是特定于 Open Sans 或它是倾斜的(不同的样式会在不同的浏览器中以不同的方式改变长度)。即使包含后备字体也显着改变了 Chrome 中的长度(但不是 FireFox 或 Safari)。我最好的猜测是，这是由于每个浏览器如何选择在 SVG 中呈现字体，所以最好不要使任何东西依赖于特定的长度。
在 SVG specification , getComputedTextLength() 定义为:

The total sum of all of the advance values from rendering all of the characters within this element, including the advance value on the glyphs (horizontal or vertical), the effect of properties ‘kerning’, ‘letter-spacing’ and ‘word-spacing’ and adjustments due to attributes ‘dx’ and ‘dy’ on ‘tspan’ elements.

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