JEGee.net - авторский блог программиста-консультанта 1с и web-дизайнера

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

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

 

---