← к списку статей

01.05.10 (последнее изменение 04 декабря 2010)

Оформляем заголовки

Как написать текст любимым шрифтом.

Самый тупой простой способ — сделать картинку и вставить ее с помощью <img>. Его мы не рассматриваем.

Способ номер два — вставить ту же картинку фоном. В этом случае нужно сделать такую разметку:

И задать такие стили:

И еще есть третий способ. Он хорош тем, что сэкономит уйму времени, потому что картинки делать не понадобится. Я говорю о js-библиотеке cufón. Собственно, этому вопросу и посвящена статья.

Сufón берет файл со шрифтом, разбирает его, оптимизирует и создает js-библиотечку, которую браузер использует для замены текста на элементы векторной графики <canvas> или их аналоги. Так что картинки создает сам браузер.

Cufón лучше своего предшественника, известного под именем sIFR. Во-первых, ему не требуется флэш (привет iPhone!). А во-вторых, он значительно легче управляется через файл стилей, потому что воспроизводит такие css-свойства как margin, padding, color, line-height, letter-spacing и некоторые другие. Надо признать, не все css-свойства работают. Надеюсь, в новых версиях и эти недостатки будут устранены.

Использование Cufón

  1. Заходим на страницу генератора, кликаем "Download" и скачиваем сжатую js-библиотечку с движком cufón.
  2. Возвращаемся на страницу генератора и создаем js-библиотеку с нужным шрифтом.
    • Выбираем файлы шрифтов, которые будут нужны: обычный, жирный, наклонный и жирный наклонный.
    • Ставим галочку в пункте "The EULAs ..." — подтверждаем условия использования данных шрифтов.
    • Выбираем, какие символны нам будут нужны. Это чтобы уменьшить размер результирующего файла. (Обычно я выбираю "Basic Latin" и "Cyrillic Alphabet".)
    • Через запятую вписываем доменные имена сайтов, на которых будем запускать cufón. (Например "bumagi.net, www.bumagi.net, fish.bumagi.net")
    • Ставим галочку "No thanks, use the font's own value", что означает "Плевать на размер файла, красота требует жертв!", или не ставим — вам решать.
    • Ставим галочку "Allow path optimization", если не планируем использовать cufón для мелкого текста.
    • Ставим галочку "Include kerning tables", чтобы межбуквенное расстояние было правильным.
    • Ставим галочку "I acknowledge and accept these terms" — соглашаемся с условиями лицензии MIT.
    • Настройка завершена, жмем на кнопочку и сохраняем js-библиотечку со шрифтом.
  3. Далее редактируем блок <head>.
    • В первую очередь подключаем jQuery. (Впрочем подойдет и любой другой js-фрэйморк.)
    • Затем подключаем библиотеку с движком cufón, которую мы скачали в п. 1.
    • В последнюю очередь подключаем библиотеку со шрифтом, которую сгенерили в п. 2.
    • Наконец, добавляем script-блок и указываем для каких элементов на странице мы будем использовать специальный шрифт. Желательно указывать конечные текстовые элементы, такие как <span>, а не целые контейнеры с множеством вложенных текстовых элементов.

  1. Специально для эксплорера объявляем перед </body> вот такой js-код:

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

И под конец немного лично-эмоционального: считаю, что cufón — это гениально.

← к списку статей