Есть ли способ сгладить иконки шрифтов в Firefox?

Question

Я использую иконки. На Chrome и Opera они выглядят нормально. Но если я попробую Firefox, они выглядят довольно размыто, если font-size Значки меньше, чем 20px, а после 30px они выглядят гладкими. Есть ли способ это исправить?
Например, проблема изменения размеров изображений в Firefox, приводящая к размытым изображениям, может быть решена путем поворота изображения на очень небольшое количество. Можно ли применить нечто подобное к иконкам шрифтов?

Чтобы увидеть, как это выглядит, просто зайдите (используя firefox) на любой веб-сайт с иконками (например, шрифтом awesome) и попробуйте изменить их размер до 20px и посмотрите, насколько они размыты.

Answer 1

Проблема исходит от рендеринга шрифтов, который используют браузеры. Разные платформы используют разные методы. Браузеры предпочитают использовать метод ОС или собственную реализацию.

Причина, по которой он выглядит лучше в Chrome, заключается в том, что Chrome не подписывается на ClearType в Windows. IE и Firefox оба используют его (чтобы проверить это Пуск -> Настроить текст ClearType и включить и выключить его, чтобы увидеть разницу). Но Firefox на Mac и Linux не будет использовать его там, потому что это технология только для Windows.

Chrome имеет преимущество в этой конкретной проблеме, потому что он не использует ClearType, он использует DirectWrite на всех трех платформах. Это означает, что в Chrome все должно выглядеть одинаково, независимо от того, на какой ОС вы работаете.

Почему это важно? Потому что вы не контролируете компьютер пользователя. Вы не можете принудительно отключить ClearType, вы не можете изменить настройки ClearType пользователя. Пользователь может изменить свои настройки ClearType в любом случае, разрушая любые мелкие детали, которые вы могли бы сделать, используя text-shadow чтобы это работало.

Возможно, вам повезет больше, если использовать для этого cufon, но это отнюдь не уверенная вещь.

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

Answer 2

Хорошим решением для OS X является использование свойств рендеринга текста и сглаживания.

body {
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

Это также хорошо работает, когда дело доходит до веб-шрифтов.

Answer 3

Я обнаружил, что иногда стиль шрифта будет переопределен при использовании шрифтов Google, и шрифт будет выделен жирным шрифтом. Этот комбо хорошо сработал для меня.

.element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important;
}