Браузеры и сглаживание шрифтов

Question

У меня проблема с отрисовкой свойства CSS "сглаживание шрифтов" с помощью html2canvas во всех браузерах, которые у меня есть (FF/Chrome/Safari/0pera)

Но, отчаянно пытаясь решить эту проблему, я в конце концов задумался, зачем мне сначала сгладить текст, и заметил, что только шрифты, отображаемые на темном фоне, вызывают проблемы.

Итак, я сделал JSFiddle, чтобы сделать несколько тестов (см. Ссылку ниже)

Если вы работаете на Mac (я не знаю о браузерах ПК), вы можете увидеть с помощью jsFiddle, что:

• черный шрифт на белом фоне полностью в порядке.
• белая версия того же шрифта на черном фоне теперь стала более смелой и грязной по любой причине.
• И это будет решено, только если я применю к нему свойство "сглаживание шрифтов" css.

В css ничего не изменилось и шрифт абсолютно стандартный. Все, что изменилось, это ограничение: темный фон с ярким шрифтом или наоборот.

Итак, ясно, что это не проблема, связанная со шрифтом или технически блокирующей проблемой. Это зависит только от фона и цвета шрифта. Первоначально я думал, что это из-за моего причудливого шрифта, но даже стандартные веб-шрифты будут генерировать проблему. Итак, в конце концов, это только кажется вопросом контраста. Черное на белом в порядке, а белое на черном - нет.

Есть ли (css) обходной путь для получения тех же результатов, независимо от яркости фона / контраста или цвета шрифта, без использования тогда "сглаживания шрифтов" в качестве нестандартизированного исправления?

Проблема с контрастом, вероятно, известная проблема, и я не могу поверить, что у нее нет стандартного исправления или, по крайней мере, обходного пути, который бы работал без свойств CSS, специфичных для браузера. Применение свойства css в соответствии с цветом фона кажется очень неудобным.

Вот 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> 

Вот 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/

Благодарю.