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

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

铬:

29.34765625

看起来,这font-style: oblique会影响这些结果.有谁遇到过这个问题？

Answer 1

我已经在 Chrome、Safari 和 Firefox 中对此进行了一些测试，每个渲染的长度略有不同。您肯定会看到一些意想不到的行为。它不是特定于 Open Sans 的，也不是倾斜的（不同的样式在不同的浏览器中会以不同的方式改变长度）。即使包含后备字体也会显着改变 Chrome 中的长度（但不包括 FireFox 或 Safari）。我最好的猜测是，这是由于每个浏览器选择在 SVG 中渲染字体的方式所致，因此最好不要做任何依赖于特定长度的事情。

\n

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

\n

\n

渲染此元素内所有字符的所有提前值的总和，包括字形上的提前值（水平或垂直）、属性 \xe2\x80\x98kerning\xe2\x80\x99 的效果、\ xe2\x80\x98letter-spacing\xe2\x80\x99 和 \xe2\x80\x98word-spacing\xe2\x80\x99 以及由于属性 \xe2\x80\x98dx\xe2\x80\x99 和 \xe2\x80 进行的调整\x98dy\xe2\x80\x99 位于 \xe2\x80\x98tspan\xe2\x80\x99 元素上。

\n

\n

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

\n