字体平滑不适用于按钮答案

【问题标题】：font-smoothing not applied to buttons字体平滑不适用于按钮
【发布时间】：2012-11-13 10:27:41
【问题描述】：

我使用这个 sn-p 来防止 webkit 在使用 CSS 转换时更改抗锯齿：

html{ -webkit-font-smoothing: antialiased; }

这在大多数情况下都可以正常工作，但是在使用此 HTML 玩 Bootstrap 时，我注意到 chrome 中有些奇怪：

<button class="btn btn-inverse">John Doe</button>
<a class="btn btn-inverse">John Doe</a>

这是它在 OSX/Chrome 中的外观：

小提琴：http://jsfiddle.net/hY2J7/。事实上，它似乎根本不适用于按钮。是否有更安全的技术可以在 webkit 中为所有元素触发相同的抗锯齿？

【问题讨论】：

【解决方案1】：

你试过了吗？

-webkit-backface-visibility: hidden;

我可以在 OS X 上的 Chrome 中使用它in this update of your jsfiddle

【讨论】：

【解决方案2】：

有一个名为 webkit-font-smoothing 的属性可以取值 'antialiasing'，但是……它不会帮助您修复字体平滑。虽然它应该可以在 Macintosh 上运行，但它不能在 Windows 机器上运行。浏览器将使用自己的配置覆盖属性设置。

那么，有什么办法可以解决这个问题吗？有一个技巧可以使字体更平滑。您将在本文的进一步内容中找到解决方案。（该文章链接：http://kazymjir.com/blog/chrome-font-smoothing-antialiasing-fix/）

使用 text-shadow CSS3 属性 可以轻松解决这个问题，这将创建一种我们可以称之为 “假抗锯齿” 的效果。

我希望这可以帮助您解决问题。

【讨论】：

【解决方案3】：

Your answer 是：

* {-webkit-font-smoothing: antialiased;}

【讨论】：

【解决方案4】：

由于 -webkit-font-smoothing 不是标准属性，它的继承规则没有正确定义。

在这种情况下，对于按钮元素，-webkit-font-smoothing 的默认值为 'auto' 而不是 'inherit'。

你可以通过添加这个css规则来解决这个问题：

button {
    -webkit-font-smoothing: inherit;
}

现在，按钮元素应该继承您设置的任何值。

您可能还想运行一些其他测试，看看是否有任何其他元素也表现出相同的行为。

【讨论】：

【解决方案5】：

试试这个代码：

.btn{
  text-shadow: 0 0.3px 2px rgba(255,255,255, 0.9);
}

【讨论】：