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

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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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