Chrome中的css文本阴影答案

【问题标题】：css text-shadow in ChromeChrome中的css文本阴影
【发布时间】：2012-03-13 19:57:33
【问题描述】：

在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 中的外观相同。

【问题讨论】：

一切正常。我在 mac ox 上使用 chrome 17
似乎当 Chrome 渲染阴影时，它以某种方式使“m”成为一个更窄的字母。尝试设置color:rgba(0,0,0,0)，你就会明白我的意思了。无论您之后对text-shadow 所做的任何事情，都会保持格式错误。另请注意，如果您将字体从 Verdana 更改为 ie。 Arial，影子似乎还不错。所以我想它可能是类型向量的东西......也许......

【解决方案1】：

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

text-shadow: 1px 1px 0 black;

似乎在 Chrome 中解决了这里的问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

它对我来说很好用。

Chrome 17.0.963。火狐11.0

不知道怎么了。尝试增加字体大小。！

【讨论】：

【解决方案5】：

检查一下可能会有所帮助，但我不确定。看来您可能有抗锯齿问题，有人帮我修复了每个浏览器中的抗锯齿。

这包含 translate3d(0px,0px,1px) 以便图形处理器处理处理并软化锯齿

【讨论】：

【解决方案6】：

text-shadow 必须采用以下格式：

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

示例：

文本阴影：rgb(246, 0, 0) 5px 3px 8px;

输出：

【讨论】：