2

我会假设在两个字符跨度上将字母间距设置为 -1px 会将其宽度减少 1px。但是，请在 Chrome 中查看以下内容：

span.style.fontSize=48
48
span.textContent="99"
"99"
span.style.letterSpacing=0
0
span.offsetWidth
16
span.style.letterSpacing="-1px"
"-1px"
span.offsetWidth
14

将 letter-spacing 设置为 -1px 会使宽度减少 2px 而不是 1。

如果在您尝试将其与 text-align: center 对齐时，它不会导致字母间距为 -1px 的文本略微偏离中心，那么这可能不太重要。

CSS规范似乎清楚地表明字母间距应该影响字母之间的间距。然而，似乎至少在 Chrome 中，一些概念起点和文本的第一个字符之间的间距也被压缩了。

对此有任何想法或想法吗？IE 10 表现出相同的行为。一个错误？还是对规范的误读？

4

1 回答 1

3

行为

我同意规范相当明确地说明了这一点。引用此页面：

字母间距不得应用于行首或行尾。

但是， Win 7 上的这个小提琴向我展示了在 Chrome、IE9 和 Firefox 上，所有这些都在最后一个字母之后应用了一个更少的像素（Firefox 向我展示了从与边框的间隙开始的少一个像素开始)，这似乎违反了它没有应用于行尾。结果是所有似乎都将字符串中每个字符的总宽度减少了 1px。

letter-spacing因此，它似乎在任何浏览器中都不能正常工作，如果是一个正数也没关系。

可能是“最佳”解决方法

添加padding-right: 1px到spanwithletter-spacing: -1px以抵消这个 fiddle 中看到的问题。

可选解决方法：:after伪元素

在spanwith 上letter-spacing: -1px放置以下内容，如this fiddle所示：

span:after {content:''; display: inline-block; width: 1px;}

最后的想法

上述任何一种解决方案都可能对计算差异有所帮助，也可能text-align: center无济于事，因为这似乎部分取决于基于显示宽度的中心 1px 舍入，如拉伸此小提琴的宽度时所见）。

于 2012-08-04T19:56:22.777 回答