Что делать, если заголовок хочется видеть особенным, но совсем не хочется нарезать заголовок картинкой?!

Помогут jQuery и Cufon (Cufón). Cufon позволяет имитировать использование на странице практически любого TTF-шрифта с вариантами написания. Чаще всего используется Cufon для формирования внешнего вида тегов H1-H6 и других нуждающихся в особенном выделении блоков текста.

Чтобы задействовать Cufon, нужно:

  • выбрать шрифт ttf, который мы хотим использовать на странице
  • зайти на страницу Cufon для генерации скрипта имитации выбранного шрифта
  • в первом блоке страницы Cufon подгрузить ttf-варианты шрифта, которые мы хотим использовать
  • во втором блоке выбрать флажками какие глифы будет использовать скрипт (кириллические, японские, китайские и т.п.)
  • нажать кнопку в самом низу страницы, чтобы получить возможность скачать готовый скрипт.

Очень не рекомендуется (и об этом написано на самом сайте) выбирать флаг «Все глифы». Размер скрипта получится неадекватным требуемым задачам.

Демо урокаСкачать урок


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

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

Также создает проблему размер файла-скрипта для шрифта. Пусть в нашем примере он загружается после загрузки всего документа, а, значит, не блокирует готовность страницы к использованию. Однако вес в более чем 50кб при достаточно большом объеме контента приведет к проблеме быстрой загрузки.

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

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

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

С позиции SEO проблем использования Cufon нет никаких. Все «кошерно» — сначала загружается стандартная страница, а затем после загрузки всей страницы скрипт выполняет подмену шрифта в тексте изображением этого шрифта. Подмену можно осуществлять как по id элемента, так и по class элементов.

Пример скомплектован и для тега H1, и для id , и для класса.

p.s. : Средняя скорость интернета по регионам растет, поэтому вес в 50кб не является критическим, однако использование Cufon стоит ограничить 1-2 вхождениями, а дизайнеру пообещать оторвать руки, если он еще раз использует в макете нестандартный шрифт.

 


 

3 Коммент. : “jQuery: изменяем вид шрифта с помощью Cufon”

  1. delfi пишет:

    А при чем тут jQuery?

    • При том, что Cufon основан на Javascript/jQuery и без установленной библиотеки jQuery работать не будет.

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