Сглаживание шрифтов в браузере с использованием Cufon

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

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

Насчёт сглаживания шрифтов надо сказать, что некоторые браузеры в некоторых операционных системах сами всё сглаживают. Да и в самой операционной системе можно включить сглаживание шрифта. К примеру в Windows XP сглаживание настраивается здесь — Пуск -> Настройка -> Панель управления -> Экран -> вкладка «Оформление» -> кнопка «Эффекты» -> Применять следующий метод сглаживания экранных шрифтов -> ClearType -> Ok. Сглаживаться будет всё и вся в ОС.

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

Предлагаю один из вариантов сглаживания шрифта — использование библиотеки Cufon.

Это javascript библиотека.

Обычно её используют для внедрения на сайт нестандартных шрифтов. Вкратце суть в следующем — текст заменяется на векторную графику. SVG во всех нормальных браузерах. VML в IE. Подробнее на сайте или в гугле. Ну или вот хорошая статья.

Текст при использовании Cufon получается сглаженным. При этом должен быть включён Javascript в браузере.

Поддерживаются следующие браузеры:

  • Internet Explorer 6, 7 and 8
  • Internet Explorer 9 beta (as of 1.09i)
  • Mozilla Firefox 1.5+
  • Safari 3+
  • Opera 9.5+
  • Google Chrome 1.0+
  • iOS 2.0+
  • Opera Mini (to a certain degree)

Пример сглаживания:

Было

Стало

Результат на лицо.

Минусы данного подхода

  1. Должен быть включен Javascript. Но я думаю он у многих пользователей включен.
  2. Подгрузка файлов JS. Размер может достигать до 200 кбайт. В зависимости от шрифта.
  3. Нельзя выделить текст, скопировать. Как вариант — использовать Cufon только в некоторых частях сайта — текст в меню навигации, шапке. Для контента, который не потребуется копировать.
  4. Если ссылка подчёркнута, то после применения библиотеки подчёркивание исчезает. Недостаток библиотеки.
  5. Оформление при наведении на элемент надо описывать отдельно. Из стилей не берётся. Однако в остальном оформление будет согласно таблице стилей.

Пожалуй это все минусы. В некоторых ситуациях они будут значительными, но в большинстве случаев на них можно не обращать внимания. Особенно в тех случаях, когда дизайнер нарисовал, дизайн принят и надо прямо обязательно сделать как в дизайне сглаженным и слегка жирным(любят дизы ставить Faux Bold в Photoshop).

Понравилось? Поделись с другими плз












Комментарии ВКонтакте





Комментарии с сайта
  1. Хм, посмотрим. Спасибо.
    Посмотрю и опишу, есть еще метод, но он грязь валякает 🙂


Оставить комментарий

*