Что делать, если заголовок хочется видеть особенным, но совсем не хочется нарезать заголовок картинкой?!
Помогут 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 вхождениями, а дизайнеру пообещать оторвать руки, если он еще раз использует в макете нестандартный шрифт.
