font-smoothing not applied to buttons

font-smoothing not applied to buttons

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:

John Doe

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?

Solutions/Answers:

Solution 1:

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.

Related:  Bootstrap : align button text left

Solution 2:

Your answer is:

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

Solution 3:

try this code :

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

Solution 4:

There is a property named webkit-font-smoothing which can take value ‘antialiasing‘, but… it will not help you with fixing font smoothing. While it should work on Macintosh, it will not work on Windows machines. The browser will override the property settings with its own configuration.

So, is there any way to fix this problem?
There is one trick that can make the fonts smoother. You will find the solution in the further content of this article.(That Article Link : http://kazymjir.com/blog/chrome-font-smoothing-antialiasing-fix/)

This problem can be easily fixed using text-shadow CSS3 property, which will create an effect which we can call “fake antialiasing”.

I hope this may help you to resolve your issue.

Solution 5:

Have you tried this yet?

-webkit-backface-visibility: hidden;

I have it working in Chrome on OS X in this update of your jsfiddle

Related:  How do I use Bootstrap Glyphicons in 3.0.0?

References