在Webkit中使用多个文本阴影和负字母间距剪切的像素

Question

我在Webkit中遇到多个text-shadow和负letter-spacing的问题，其中最后一个字母上阴影的最后几个像素被切断。

嗯，只有某些字母。

在Chrome或Safari中查看this demo（据我所知，它在Firefox和Opera中的效果与预期一致。）

我知道我可以另外使用-webkit-text-stroke，但这会导致这个问题：

有什么想法吗？感谢。

Answer 1

是的，我会说这是一个绘图错误。当你开始使用负字母间距时，看来webkit会让字母周围的框裁剪阴影。

我发现通过增加尺寸并执行display: inline以便在信件周围找到折叠框来更容易看到问题。

http://jsfiddle.net/tMeuB/3/

火狐

自7.0.1版起

注意当负字母间距从左向右增加时阴影如何保持不变。

Safari浏览器

自版本5.1.1（7534.51.22）起

相同的测试。查看当字母间距增加时阴影如何被裁剪。在第3帧中，您几乎可以看到算法如何计算它。我猜测裁剪量=字形宽度 - 字形框宽度。

Answer 2

我找到了一种解决方案。

这是另一个demo。

如果您在裁剪的字母后放入 ，则会修复它。但那并不理想。

我尝试使用类似的技术和:after伪元素，但它不起作用。

幸运的是，我试图将此样式应用于的文本是一个伪元素，因此很容易在\00A0中抛出content:''