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

.getComputedTextLength() returns different values in IE and Chrome

本文关键字：返回 Chrome IE getComputedTextLength      更新时间：2023-09-26

我在编写一些小程序时遇到了一个问题。有一个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

铬：

29.34765625

似乎font-style: oblique影响了这些结果。有人遇到过这个问题吗？

我在Chrome、Safari和Firefox中对此进行了一些测试，每种渲染的长度都略有不同。你肯定看到了一些意想不到的行为。它不是Open Sans特有的，也不是倾斜的（不同的风格会在不同的浏览器中改变不同的长度）。即使包含回退字体也显著改变了Chrome的长度（但FireFox或Safari没有）。我的最佳猜测是，这是由于每个浏览器选择如何在SVG中呈现字体，所以最好不要使任何内容依赖于特定的长度。

在SVG规范中，getComputedTextLength（）被定义为：

呈现此元素中所有字符的所有前进值的总和，包括字形上的前进值（水平或垂直），属性"紧排"、"字母间距"answers"单词间距"的影响，以及由于属性"dx"answers"dy"对"tspan"元素的调整。

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

相关文章：