css – 字体平滑不适用于按钮

我使用这个代码段来防止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中的相同抗锯齿？

解决方法

由于-webkit-font-smoothing不是标准属性，因此其继承规则未正确定义。

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

您可以通过添加此CSS规则来解决此问题：

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

现在，button元素应该继承你设置的任何值。

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