font-smoothing not applied to buttons

Question

I have used this snippet to prevent webkit from changing antialiasing when using CSS transforms:

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

This works fine for most cases, however I noticed some weirdness in chrome when playing around with Bootstrap using this HTML:

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

This is how it looks in OSX/Chrome:

Fiddle: http://jsfiddle.net/hY2J7/. In fact, it seems that it is not applied to buttons at all. Is there a safer technique to trigger the same antialiasing in webkit for all elements?

Answer 1

Your answer is:

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

Answer 2

As the -webkit-font-smoothing is not a standard property, its inheritance rules are not properly defined.

In this case, for button elements, the default value for -webkit-font-smoothing is 'auto' not 'inherit'.

You can solve this by adding this css rule:

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

Now, the button element should inherit whatever values you've set it to.

You may also want to run some other tests to see if any other elements also exhibit the same behaviour.