2

В Гугле нашел свойство -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); /* тёмная тень */
}

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

2 ответа 2

3

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

  • -webkit-font-smoothing: antialiased – свойство нужно для сглаживания кастомных шрифтов в Safari/Chrome для macOS/iOS.

  • -moz-osx-font-smoothing: grayscale – свойство нужно для сглаживания кастомных шрифтов в браузере Firefox для macOS/iOS.

  • text-rendering: optimizeLegibility – обеспечивает качественные кернинг (интервалы между буквами) и лигатуры (соединение букв) во всех современных браузерах, кроме IE. Очень сильно тормозит рендеринг страницы в целом, поэтому рекомендуется использовать точечно, к примеру, на заголовках.

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

введите сюда описание изображения

5
  • Проблема возникает при больших размерах текста, пиксельные лесенки выглядят как-то не очень и хочется это убрать. 18 ноя 2018 в 18:35
  • @RomanIceman, попробуйте применить свойство text-rendering: optimizeLegibility на блоки, с большим размером шрифта. Хотя я склонен к мнению, что вы видите лесенки из-за того, что у вас монитор с низким разрешением.
    – user315748
    18 ноя 2018 в 22:19
  • @RomanIceman, ещё нашел такое решение – использовать .svg-формат шрифтов, который по умолчанию сглаживается на Windows, в отличии от EOT, WOFF или TTF: medium.com/@MateMarschalko/…
    – user315748
    18 ноя 2018 в 22:29
  • Да, возможно проблема в разрешении(1360×700 с чем-то, ноут), потому что на телефоне текст на сайте(любом) красивый, а на ноуте пиксельные буковки(но с маленькими шрифтами не так заметно). Попробую недавно сверстанный сайтик на телефоне открыть 19 ноя 2018 в 3:29
  • Да и на телефоне разрешение 1920x1080 при намного меньших размерах 19 ноя 2018 в 3:32
0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.