按钮上未应用字体平滑效果。

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中的效果:

Fiddle: http://jsfiddle.net/hY2J7/。实际上，似乎根本没有应用于按钮。是否有更安全的技术可以触发webkit中所有元素的相同抗锯齿效果？

- David Hellsing

---

我无法复制这个问题。在我的环境中（OSX/Chrome 23），按钮和超链接的文本都与您图片右侧显示的内容一致。 - tw16

@tw16 你使用的是哪个版本的OSX？ - David Hellsing

鉴于2023年，我无法重现此问题。 - undefined

Answer 1

你的答案 是：

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

- Francis Kim

---

哦，伙计，你不知道……我已经找了几个月的答案了。谢谢！ - DavidVII

Answer 2

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

对于按钮元素，默认值为'auto'而不是'inherit'。

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

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

现在，按钮元素应该会继承您设置的任何值。 您可能还想运行一些其他测试，以查看是否有任何其他元素也表现出相同的行为。

- Clark Pan

---

你的回答很好，针对性强，而且解释了为什么有效，所以我给你投了赞成票。 - Kristin

Answer 3

尝试这段代码：

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

​

- Ngalam City

Answer 4

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

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

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

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

- John Peter

Answer 5

你试过这个吗？

-webkit-backface-visibility: hidden;

我已经在OS X的Chrome上实现了它 （在您的jsfiddle更新中）。

- daveyfaherty