Пользователь
0,0
рейтинг
20 июня 2011 в 17:11

Разработка → Свойства CSS, влияющие на рендеринг шрифта перевод

CSS*
Когда дело доходит до рендеринга шрифта на Вебе, дизайнер может сделать не слишком многое. То, как шрифт выглядит на экране, по большей части зависит от операционных систем, браузеров, дизайна гарнитур, шрифтовых файлов и от того, дополнены ли эти файлы инструкциями для самых неожиданных сценариев рендеринга. Но иногда свойства CSS могут повлиять на то, как выглядит шрифт.




Примечание: на скриншотах показан рендеринг шрифтов в Сафари 5 на МакОси 10.6.

Размер шрифта



Незначительное изменение размера шрифта может очень сильно отразиться на внешнем виде гарнитуры

Прежде всего, есть свойство font-size. Растеризация векторных контуров шрифта под размеры, адекватные современным экранам, означает, что каждая буква представлена лишь кучкой пикселей. Следовательно, небольшая разница в размере шрифта может очень сильно отразиться на внешнем виде гарнитуры.

Цвет


Свойство color — ещё один важный фактор. Изменяя контраст между цветами текста и фона, можно получить заметную разницу во внешнем виде гарнитуры. Анти-алиасинг выглядит менее заметным при слабом контрасте — переход от переднего плана (цвета шрифта) к фону становится менее броским.


Высокий контраст; тёмный текст на светлом фоне


Слабый контраст


Светлый текст на тёмном фоне

Светлый текст на тёмном фоне, как правило, выглядит толще, чем тёмный на светлом (см. также исследование на эту тему, выполненное Шоуном Бланком), поэтому в таких случаях стоит уделять особенное внимание низкой контрастности. Учитывайте, что недостаток контраста может вызвать затруднения у читателей с нарушенным зрением. Утилита Colour Contrast Check, написанная Джонатаном Снуком, проверяет цвета фона и переднего плана на соответствие WCAG.

WebKit и сглаживание шрифтов


Свойство -webkit-font-smoothing (работающее только в браузерах с поддержкой WebKit) позволяет дизайнеру указать один из трёх вариантов: subpixel-antialiased (по умолчанию), antialiased, или none. Тим Ван Дамм показал, что значение «antialised», как правило, делает текст более тонким в Сафари на Маках, чему очень сильно обрадовались дизайнеры, ранее использовавшие посторонние свойства — например, text-shadow — чтобы текст выглядел менее неуклюжим.

Другие чуваки подвергали сомнению использование -webkit-font-smoothing как средство утончения текста, хоть это и префикс, а не постхак. Кристоф Зиллгенс утверждает, что диагональные засечки выглядят плохо при отключённом сабпиксельном анти-алиасинге; Дмитрий Фадеев говорит, что мелкий текст менее резок.

Повороты


Наверное, очевидно, что вращение текста ведёт к проблемам с рендерингом. Плоские преобразования в CSS3, как объяснил Энди Кларк в своём посте для Typekit, позволяют дизайнерам поворачивать элементы; хотя этой фишкой можно достичь желаемого графического результата, негоризонтальный набор — это подлинные дебри рендеринга. К счастью, подобные эффекты менее заметны на экранах с высоким разрешением.


Скриншот текста, повёрнутого на 90o; изображение развёрнуто


Скриншот текста, повёрнутого на 45o; изображение развёрнуто


Скриншот текста на Safari Mobile, повёрнутого на 45o; изображение развёрнуто

Вывод


Рендеринг шрифта почти неподвластен веб-дизайнеру. Но важно помнить, что можно добиться желаемого результата, используя определённые подконтрольные стили. В процессе тестирования не забывайте, что разные стили для контраста, размера, цвета и поворота могут привести к значительным отличиям.
Перевод: Tim Brown
Eugene Kudashev @EugeneKudashev
карма
23,1
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (48)

  • –9
    Я бы еще добавил, что Mac OS рендерит шрифты лучше остальных систем.
    Так что дизайнерам настойчиво рекомендую проверять результат еще как минимум на Windows и править css соответственно.
    • +17
      Mac OS рендерит по-другому. А лучше или хуже — это дело вкуса.
      • +8
        Насчет вкуса вы, пожалуй, правы.

        Но проверять надо в любом случае, вот картинка, чтобы было видно разницу:

        • +3
          У вас старая макось. В Лионе изменили рендер и он доступен через обновление системы.

          Лион
          image

          image
          • +2
            Разницу слабо заметно. Но шрифт выглядит чуть тоньше. Да, у меня 10.6.7.
          • +1
            Посмотрел скриншоты в комментариях и понял, что лучший рендер тот, который на своём компьютере, в самостоятельно выбранном браузере и операционной системе.
          • +1
            У вас просто монитор не Эпловский, поэтому субпиксельный рендеринг шрифтов выключен (или вы его сами выключили). У меня тоже выключен, и в 10.6 рендирится как у вас на скриншоте.
            • 0
              У меня 10.6.7, но обновление последние, что-то вроде Lion Text Render изменило вывод шрифтов. Но да, монитор не родной.
              • 0
                Для не родного монитора советую включить «субпиксельное сглаживание шрифтов» в терминале:

                defaults -currentHost write -globalDomain AppleFontSmoothing -int 2

                Далее перезагрузить MAC OS

                -int 1 — низкое значение сглаживания шрифтов

                -int 2 — среднее значение сглаживания шрифтов

                -int 3 — высокое значение сглаживания шрифтов
        • +22
          В семерке лучше, явно видно ж.
          • +3
            В МакОСи рендер просто заточен под «что на экране — то и на бумаге при печати».
            • +6
              Экран монитора !== бумага, так что это в корне неверная идеология. ИМХО.
              • –2
                В пример: любимый drupal.org. Там любительство MAC-а приводит в CSS к перлам вида:
                line-height: 1.38461em; line-height: 1.38461em; font-size: 1.615em;
                Интересно эти верстальщики видели что-нибудь кроме MAC?
      • 0
        2flight
        >Mac OS рендерит по-другому. А лучше или хуже — это дело вкуса.
        В контексте заявления Enuriru, это дело не вкуса, а статистики и адекватности профессии.
        Дизайнер обязан понимать что 99% юзеров не могут увидеть мир его глазами только из-за того что Apple — не самая распространенная на свете платформа.
        2Enuriru
        Про дизайнера правящего CSS в позапрошлом веке один полузабытый поэт писал:

        Беда, коль пироги начнет печи сапожник,
        А сапоги тачать пирожник:
        И дело не пойдет на лад,
        Да и примечено стократ,
        Что кто за ремесло чужое браться любит,
        Тот завсегда других упрямей и вздорней;
        Он лучше дело все погубит
        И рад скорей
        Посмешищем стать света,
        Чем у честных и знающих людей
        Спросить иль выслушать разумного совета.
    • 0
      Тогда уж лучше в Linux — как нравится так и настраивай — никто тебя не ограничивает ;)
  • 0
    Еще стоит сказать про text-rendering
    developer.mozilla.org/en/CSS/text-rendering
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Казалось бы, причем тут z-index? :)
      • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          z-index теперь с перспективой? :)
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Я хихикаю не с вас, а с WebKit, друг мой.
  • 0
    Мы одно время на одном проекте очень сильно палились в webkit'ах и я думал вы напишете как раз об этом баге, ну что ж, напишу сам.
    В общем, если блок находится внутри блока с position:fixed и нигде вверх по DOM'у (но не у самого элемента, а именно вверх над элементом с position:fixed) нет указания background'а, то шрифты в webkit'е перестают сглаживаться. Примерно также разлетались шрифты в IE6 при изменении opacity.
    Решение понятно – нужно, хотя бы, body указать background.
    • 0
      Вы не указываете background для body? А color указываете?
      • 0
        В целях оптимизации, когда все сайты на белом фоне, не указываем.
        • 0
          Вы не допускаете, что, по-умолчанию, может не белый стоять фон?
          • –1
            Где именно? В настройках браузера? Ну так тот, кто там их установил мог и с !important'ом прописать. Это 0.1% (если не меньше пользователей), ваш вопрос можно задать по другому: «Вы тестируете ваши сайты под IE5?»
            • –1
              Вы пренебрегаете элементарными правилами, а потом боретесь со странными багами (из вашего первого комментария).
              • 0
                Нет, не так. Бывают проекты, развитие которых приостановлено (и может быть приостановлено на несколько лет даже), при этом браузеры и человеческая мысль не стоит на месте, а вёрстка этих проектов стоит, несмотря на то, что этими проектами можно пользовать и ими пользуется куча народа. А ещё бывает внедрение новой вёрстки на проект, которое тоже может идти годами, и на поддержание старой нет ни времени, ни ресурсов. Ну вот, как-то так. То, что вам здесь и сейчас кажется «элементарным», 3 года назад таким не было.
                Конечно, сейчас на всех новых проектах у нас всё это уже есть.
                • 0
                  Под «элементарным» я подразумевал указание цвета фона для body, это было элементарным всегда.
                  • 0
                    Приведите, пожалуйста, ссылку на ваш CSS-код трёхлетней давности и я поверю, что это было элементарным всегда.
    • 0
      А ещё такое возникает при куче других условий в том же вебките (как минимум), например при транзишнах того же опасити, а ещё флеш иногда тоже действует магически, вырубая за собой всё сглаживание.
      Этот вопрос можно копать и копать.
      • 0
        Так я и не говорил, что только pof вырубает антиалиасинг, я просто привел пример того самого банального факапа :)
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Да-да, именно в ней и появилось именно в той версии, которую активно пеарили как «поддерживающая аппаратное ускорение»
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Я год назад на этот баг смотрел, тогда мы тоже ковырялись с этим свойством и нам не помогло. Там ещё от DOM'а зависит.
              • НЛО прилетело и опубликовало эту надпись здесь
  • –3
    Я позанудничаю, позвольте. Вы во второй раз уже пишете «на вебе». Вы, простите, русский язык учили?
    • 0
      Прощаю. Учил. Скоро я опубликую топик, в котором в третий раз будет написано «контент на Вебе» (как и в этом комментарии).

      Вы можете писать «в вебе» и справедливо получать минусы — попробуйте произнести это вслух! «В вебе» звучит отвратительно.

      Давайте согласимся, что использование предлогов — вопрос устоявшейся практики и чувства языка (поэтому бывает так сложно избавиться от ошибок с предлогами в иностранном языке). Слово «веб» вошло в ежедневную речь не так давно, как, скажем, слово «кровать». А вы чётко осознаёте разницу между «в кровати» и «на кровати»?
      • 0
        Пишут на бумаге, на экране, на парте, на столе, но в вебе как в среде обмена информацией. Пишу на парте в аудитории.

        На кровати я могу попрыгать. Но лежать я буду в кровати.
  • +1
    Не знал о -webkit-font-smoothing, всегда использовал text-shadow. Спасибо!
  • 0
    Довольно странным выглядит решение показать «развёрнутые» скриншоты — ведь в таком случае пропадает смысл субпиксельного сглаживания, что довольно хорошо заметно.

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