字体中的红色轮廓

Question

我有下面的图片，它显示了右边我的字体的屏幕截图，与左边的Nike字体相比。我已经完善了应用我在firebug中找到的每一种css风格，我仍然无法摆脱这种烦人的红色轮廓。有谁知道它是什么？我尝试了文字阴影，但没有摆脱红色轮廓。 （图像放大了）

这让我起了墙，任何帮助都会非常感激。

对应的CSS

font-family: "TradeGothicLT-BoldCondTwenty",Helvetica,Arial,sans-serif !important;
color: #333;
font-size: 22px;
font-weight: normal !important;
word-spacing: -0.05em;
letter-spacing: -0.045em;
text-shadow:none;

原始字体：http://www.nike.com/us/en_us/c/basketball/nike-basketball-hyperdunk-plus 搜索“跟踪您的游戏”以在上方找到示例字体。

再次感谢

Answer 1

我想你正在浏览webkit浏览器。尝试将-webkit-font-smoothing: antialised;添加到您的正文或html元素中。

Answer 2

屏幕截图中没有红色轮廓，只有彩色像素。这是子像素着色的示例，即高级字体平滑，其在浏览器的控制下，可能由用户设置。 JOPLOmacedo的答案中提到的非标准CSS属性仅影响WebKIT浏览器。例如，在IE上，此行为取决于Windows级别的设置（以及旧版本的IE设置）。

作为一项规则，应该期望浏览器及其用户比作者更好地了解字体平滑的充分性，这取决于显示设备的属性等。