Chrome中的css text-shadow

Question

在this page上，我在Firefox标题中应用了一个文字阴影：

但在Chrome v.17中它看起来很糟糕

我看到this suggestion并从

更改了文字阴影样式

text-shadow: 1px 1px 1px black;

为：

text-shadow: 0 0 0 transparent, 1px 1px 1px black;

但它没有任何区别。我有什么办法可以改善Chrome中文字阴影的呈现方式吗？理想情况下，我希望它们在Chrome中与在Firefox中看起来一样。

Answer 1

如果我是你，我会略微改变阴影。将其更改为：

text-shadow: 1px 1px 0 black;

似乎在Chrome中解决问题。

Answer 2

我注意到 Firefox 和 Chrome 渲染文本阴影的方式不同。我能够使用它，它似乎确实有所帮助：

.logo {
 text-shadow: 1px 0 0 black;
}

before after

Answer 3

试试这个，

   text-shadow: 0px 0px rgba(0,0,0,0.75), 
     0px 1px rgba(0,0,0,0.75), 
     1px 0px rgba(0,0,0,0.75), 
     0px 0px rgba(0,0,0,0.75);

Answer 4

它对我来说很好。

Chrome 17.0.963。 Firefox 11.0

不知道什么是错的。尝试增加字体大小。！

Answer 5

检查这个可能有点我不确定虽然。看起来你可能有抗锯齿问题，有人帮我修复了每个浏览器的抗锯齿问题。

检查一下： Antialiased text in Firefox after CSS rotation

这包括translate3d（0px，0px，1px），以便图形处理器处理处理并柔化别名

Answer 6

文本阴影必须采用以下格式：

textShadow = color horizontalShadow(px) verticalShadow(px) blur(px);

示例：

文本阴影：rgb（246，0，0）5px 3px 8px;

输出：