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

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 中为所有元素触发相同的抗锯齿？

score 15 · Accepted Answer

15

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

于 2012-12-03T00:33:42.727 回答

score 14 · Accepted Answer

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

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

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

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

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

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

score 0 · Accepted Answer

0

试试这个代码：

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

</p>

于 2012-11-30T02:56:13.223 回答

score 0 · Accepted Answer

0

于 2012-12-03T07:58:01.560 回答

score 0 · Accepted Answer

你试过这个吗？

-webkit-backface-visibility: hidden;

在您的 jsfiddle 更新中，我让它在 OS X 上的 Chrome 中工作

5 回答 5