字体平滑不适用于按钮

Question

我使用此代码段来阻止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中针对所有元素触发相同的抗锯齿？

Answer 1

Your answer是：

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

Answer 2

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

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

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

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

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

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

Answer 3

试试这段代码：

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

Answer 4

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

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

可以使用text-shadow CSS3属性轻松修复此问题，这会产生一种效果，我们可以将其称为“假抗锯齿”。

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

Answer 5

你试过这个吗？

-webkit-backface-visibility: hidden;

我在OS X in this update of your jsfiddle

上使用它