Сглаживание шрифта не применяется к кнопкам

Я использовал этот фрагмент, чтобы предотвратить смену сглаживания при использовании CSS-преобразований webkit:

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

Это работает отлично для большинства случаев, однако я заметил некоторые странности в хроме при игре с Bootstrap с помощью этого HTML:

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

Вот как это выглядит в OSX/Chrome:

enter image description here

Fiddle: http://jsfiddle.net/hY2J7/. На самом деле, похоже, что он не применяется к кнопкам вообще. Существует ли более безопасная техника для запуска такого же сглаживания в webkit для всех элементов?

ОТВЕТЫ

Ответ 1

Поскольку сглаживание -webkit-шрифт не является стандартным свойством, его правила наследования не определены должным образом.

В этом случае для элементов кнопки значение по умолчанию для -webkit-font-smoothing является "auto", а не "inherit".

Вы можете решить эту проблему, добавив это правило css:

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

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

Вы также можете запустить некоторые другие тесты, чтобы увидеть, демонстрируют ли какие-либо другие элементы одинаковое поведение.

Ответ 3

попробуйте этот код:

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

Ответ 4

Существует свойство с именем webkit-font-smoothing, которое может принимать значение "сглаживание" , но... это не поможет вам с исправлением сглаживания шрифтов. Хотя он должен работать на Macintosh, он не будет работать на машинах Windows. Браузер будет переопределить параметры свойств с его собственной конфигурацией.

Итак, есть ли способ исправить эту проблему? Есть один трюк, который может сделать шрифты более плавными. Вы найдете решение в дальнейшем содержании этой статьи. (Ссылка на эту статью: http://kazymjir.com/blog/chrome-font-smoothing-antialiasing-fix/)

Эта проблема может быть легко устранена с помощью свойства text-shadow CSS3, которое создаст эффект, который мы можем назвать "поддельным сглаживанием" .

Надеюсь, это поможет вам решить вашу проблему.