Как сделать сглаживание шрифта?

137

28 апреля 2019, 02:10

В Гугле нашел свойство -webkit-font-smoothing, которое работает пока лишь в Сафари и Хроме(у меня оно вообще не работает). Также видел, что можно добавить тень к тексту и предлагали следующий код:

p{ 
  text-shadow: -1px -1px 1px rgba(255,255,255,0.2), /* наверх и влево */ 
  		 1px 1px 1px rgba(255,255,255,0.2), /* вниз и вправо */ 
  		 1px 1px 1px rgba(0,0,0,0.7); /* тёмная тень */ 
}

Вариант с тенью более-менее подходит, но нет ли других способов?

Answer 1

Непонятно, в чём именно у вас проблема. Было бы хорошо увидеть пример вашего кода. Объясню основные свойства для оптимизации рендеринга шрифтов и для чего они нужны:

-webkit-font-smoothing: antialiased – свойство нужно для сглаживания кастомных шрифтов в Safari/Chrome для macOS/iOS.
-moz-osx-font-smoothing: grayscale – свойство нужно для сглаживания кастомных шрифтов в браузере Firefox для macOS/iOS.
text-rendering: optimizeLegibility – обеспечивает качественные кернинг (интервалы между буквами) и лигатуры (соединение букв) во всех современных браузерах, кроме IE. Очень сильно тормозит рендеринг страницы в целом, поэтому рекомендуется использовать точечно, к примеру, на заголовках.

Кастомные шрифты в современных ОС и браузерах на дисплее с высоким разрешением по-умолчанию выглядят отлично и не требуют дополнительных оптимизаций. Применив text-shadow для «сглаживания» шрифта вы лишь его «размылите».

Answer 2

Да особо-то методов и не было, css не может влиять на рендер шрифтов в браузере, можно только делать легкое размытие, но смотрится все равно не так как хотелось бы. Еще нужно сказать что на отображение шрифтов влияют такие факторы как: экран, OS.

UPD: можно попробовать свойство text-rendering, работает вроде как везде кроме IE