字体平滑不适用于按钮

Question

我使用此代码片段来阻止webkit在使用CSS转换时更改抗锯齿:

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

这适用于大多数情况,但是当我使用这个HTML玩Bootstrap时,我注意到了一些奇怪的问题:

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

这就是它在OSX/Chrome中的外观:

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

Answer 1

你的答案是:

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

Answer 2

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

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

您可以通过添加此css规则来解决此问题:

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

现在,button元素应该继承你设置它的任何值.

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