Как я могу остановить это уродливое сглаживание шрифтов с помощью пользовательских шрифтов в CSS?

Question

У меня есть несколько кнопок на моей странице с использованием пользовательского шрифта с использованием CSS и файлов, сгенерированных генератором Font Squirrel .

Когда цвет шрифта черный, они отображаются нормально ...

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

Я играл с font-smooth свойством и несколькими другими вещами, но не смог заставить его работать ...

Я не думаю, что это слишком актуально, но CSS для этих кнопок ...

color: #FFFFFF;  
display: block;
padding: 1em 0.3em;
position: relative;
text-decoration: none;
z-index: 10;
font-family: BebasNeueRegular,Arial,Sans-Serif;
font-size: 22px;
list-style: none outside none;
text-align: center;
text-transform: uppercase;

Фон является отдельным элементом.

Как я могу заставить белый текст выглядеть как черный текст?

^{(Может быть трудно различить разницу между ними, но мой босс настаивает, что она есть).}

Answer 1

Это сработало для меня:

-webkit-font-smoothing: antialiased;

Answer 2

И помните, что некоторые элементы html по умолчанию выделены жирным шрифтом, например h1, h2 ... Когда я использую font squirrel для генерации шрифта и использую его, например, с h1, я всегда ставлю:

font-weight: normal;

Answer 3

Отчасти проблема в том, что это не очень качественный шрифт. Я согласен с предложением @ тридцатки текста-тени. Черно-черная текстовая тень размером 1 пиксель должна уменьшить шрифт. Любой браузер, который не поддерживает текстовую тень, все равно будет ужасно отображать шрифт.