Browsers and font smoothing

Question

I have a problem rendering the "font-smoothing" CSS property with html2canvas on all browsers I have (FF/Chrome/Safari/0pera)

But trying desperately to solve that, I eventually wondered why I had to smooth the text in the first place and i noticed that only the fonts displayed on a dark background were causing problems.

So, I made a JSFiddle to make some tests (see the link below)

If you are on Mac (I don't know about PC's browsers), you can see with jsFiddle that:

• the black font on a white background is totally ok.
• the white version of the same font on a black background is now bolder and messier for whatever reason.
• And this would be resolved only if I apply a css "font-smoothing" property to it.

Nothing changed in the css and the font is absolutely standard. All that changed is the constrast: dark background with a bright font or the contrary.

So, clearly, it's not a problem related to the font or to a technically blocking issue. It just depends on the background and the font color. I originally thought it was because of my fancy font but even the standard webfonts will generate the problem. So, at the end of the day, it only seems to be a matter of contrast. Black on white is ok while white on black is not.

Is there any (css) workaround to get the same results, whatever the background luminosity/contrast or font color, whitout using "font-smoothing" as a non standardized fix then?

The contrast thing is probably a known issue and I can't believe it has no standard fix or, at least, a workaround that would work without browser-specific css properties. Applying a css property according to the background color seems very awkward.

Here is the html:

<div class="white_no_smoothing">Test of text 0123</div>
<div class="black_no_smoothing">Test of text 0123</div>
<div class="black_smoothing"   >Test of text 0123</div> 

Here is the CSS:

.white_no_smoothing{
    background:#fff;
    color:#000;
    width:250px;
    height:50px;    
    display:block;
    font-size:36px;
}

.black_no_smoothing{
    background:#000;
    color:#fff;
    width:250px;
    height:50px;    
    display:block;
    font-size:36px;
}

.black_smoothing{
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    background:#000;
    color:#fff;
    width:250px;
    height:50px;    
    display:block;
    font-size:36px;
}

JSFiddle: https://jsfiddle.net/Lzy4s4tw/3/

Thanks.