Cufón – используйте шрифты, какие душа пожелает

    Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
    1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
    2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
    3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
    4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
    5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

    Для любознательных: есть еще один способ, практически полный аналог куфона — typefaces.js, но сегодня мы будем говорить не о нем.

    Что за куфон?


    Как пишут на сайте разработчики – призвание их проекта стать достойной альтернативой для sIFR, который несмотря на все свои заслуги все же несколько сложен в настройке и использовании. Для достижения сего были поставлены такие цели:
    1. Не требовать плагинов, шмагинов – используются только средства, нативно поддерживаемые браузером (из этих средств, используются JavaScript, SVG и <canvas> для нормальных, VML для IE)
    2. Совместимость – должен работать в всех распространенных браузерах.
    3. Простота использования – минимум приготовлений и конфигурации.
    4. Скорость – она должна быть достаточно большой, даже для объемных текстов.


    Как работает


    Cufón состоит из двух независимых частей – генератора шрифта, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат, который будет использоваться далее. Вторая часть – движок рендеринга на JavaScript.

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

    Попробуем


    Попробуем все это на деле. Для начала возьмем файл со шрифтом, у меня есть для примера шрифт Rokwell, в обычном и жирном начертании. Идем по адресу cufon.shoqolate.com/generate и пихаем в форму имеющиеся у нас файлы. Далее, по желанию, отмечаем некие дополнительные настройки и получаем файл, в моем случае это был Rockwell_400-Rockwell_700.font.js Название нам показывается, что файл содержит наш шрифт в двух начертаниях, наглядно, но как-то долго такое в тег скрипт прописывать…

    Следующим шагом будет скачивание собственно дистрибутива Cufón, который в сжатом виде занимает каких-то 14 КБ. cufon.shoqolate.com/js/cufon-yui.js

    Подключаем оба этих файла в наш документ, как самый обычный JavaScript.

    <script type="text/javascript" src="./js/cufon-yui.js"></script>
    <script type="text/javascript" src="./js/Rockwell_400-Rockwell_700.font.js"></script>

    Теперь выбираем, какие именно элементы страницы мы хотим прорисовать нашим красивым шрифтом. Для примера все заголовки H1, нет проблем:

    <script type="text/javascript">
        Cufon.replace("h1");
    </script>

    Да и это все, что от нас требуется. Цвет, размер и другие параметры для прорисовки берутся из правил CSS. Если они конечно заданы.

    Если мы хотим заменять не только H1, но и какие нибудь «ul.menu>li.active>a», то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам. Дело в том, что сейчас мало кто обходится без таких JavaScript библиотек, как Prototype, jQuery, MooTools или Dojo, а потому создатели решили не делать свою библиотечку избыточной и предлагают нам воспользоваться сторонней. Правильно предлагают! Итак, при использовании одной из вышеприведенных библиотек, нам просто надо подключать их в документе раньше чем Cufón, тогда он сам разберется что к чему и можно начинать использовать более сложные запросы.

    Особая заметка для людей, которые пекутся о пользователях IE. Разработчики рекомендуют вставлять следующий код, сразу перед </body>, либо перед вызовом любого внешнего скрипта, например Google Analytics:

    <script type="text/javascript"> Cufon.now(); </script>


    Это должно избавить IE от некоторой задержки в прорисовке шрифтов.

    Использование нескольких шрифтов.


    <script src="cufon-yui.js" type="text/javascript"></script>
    <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
    <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
        Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
        Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
    </script>


    Если не указать дополнительных настроек при вызове, то будет использован последний загруженный шрифт (Myriad_Pro_400).

    И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще в CP1251 – ваши проблемы.
    UPD: пользователь pgg демонстрирует, что CP1251 — поддерживается!

    Тонкости


    Если при вызове рендера мы хотим указать для текста какие-то дополнительные визуальные настройки, то это следует делать так:
    Cufon.replace("ul.menu li.active a", {color:'#000000'});


    Это может понадобится например в следующем случае:
    Cufon.replace("ul.menu li a");
    Cufon.replace("ul.menu li.active a", {color:'#000000'});

    При вызове первого рендерера, Cufón правильно определит цвет для всех ссылок в меню, согласно правилам CSS, однако он не будет ходить дальше и выяснять, есть ли у нас дальше какие-то отличия, потому одна из ссылок может быть показана белым цветом на белом фоне. Для исправления подобной ситуации и служит вызов второго рендерера.

    Подобным образом можно прописывать не только цвет, а и практически все свойства CSS, относящиеся к тексту. Кроме того, есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства, где это хорошо описано. wiki.github.com/sorccu/cufon/styling

    Еще стоит обратить внимание на тот момент, что замена шрифтов происходит только в момент вызова рендерера:
    Cufon.replace("h1.alala");


    Произведет замену для всех элементов h1 с классом alala, если вы в дальнейшем с помощью скрипта присвоите класс alala, для другого h1, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.

    Пример


    Было:
    cb
    Стало:
    ca

    Ссылки


    Страница проекта на github
    Документация по части визуального офрмления при помощи CSS
    Генератор шрифтового файла

    Оригинал статьи на блоге Yed-Prior
    Метки:
    Поделиться публикацией
    Комментарии 106
    • 0
      Вопрос. А какого размера получается файл содержащий шрифт, который в нашем случае Rockwell_400-Rockwell_700.font.js?
      • 0
        Всё зависит напрямую от сложности шрифта (от количества элементов). Можно получить файл на 20 Кб, можно на 300. В среднем для гротесков и антикв 40-60 кб. По моему опыту.
      • 0
        31.2 кб. Генерится он уже сжатым.
        Изначально файлы шрифтов весили 132 кб.
        При генерировании были использованы настройки по умолчанию (за одним исключением, которое я уже не помню).
    • +2
      Вообще на хабре с годик назад это было, но за проделанный объём работы всё равно плюс.

      От себя добавлю, что остановился именно на Куфоне, ибо сам он и его шрифты весят меньше, чем у typeface и шрифт генерится правильный, а не пойми что, как у sIFR (и без плясок с флешем). Есть правда пока мелочи типа невозможности визуально выделить текст, но это обещали исправить вроде.

      В общем лучшее после font-face решение. ИМХО.
      • 0
        На счет выделения текста: это врядли пофиксают, так как там заменяется на <canvas>, что по сути есть картинка. Так что это больше к создателям браузера, а не куфона.
        • 0
          Угу, всё упирается в IE, насколько я помню. Но когда-то обещали, что пофиксят. Ждём-с )
          • +1
            Фиг! Все упирается в оперу. Они писали что знают как сделать выделение везде, кроме оперы.
            • 0
              Да, вы действительно правы. Привычка хаять IE меня в этот раз подвела )
        • +2
          не боаузера, а IE.
          • 0
            Имелось ввиду, что даже если есть поддержка canvas, выделять текст на нем невозможно. Это как картинка.
      • +8
        Невозможность визуального выделения для текста — это, по-моему, не мелочь.
        • +6
          Генерация уродливого шрифта sIFRом не мелочь, на этом фоне невозможность выделить штекст — мелочь. Так как применять особые шрифты разумно для рекламных блоков, менюшек и прочего, но никак не для основного текста, то можно с большой вероятностью сказать, что выделять этот текст мышкой будут очень немногие. Хотя факт косяка, это, конечно, не отменяет.
          • +3
            Тем не менее текст при использовании SIFR выделить и скопировать можно, впрочем соглашусь с вами для заголовков это не так важно, а использовать целиком свой шрифт для всего текста это перебор.
          • 0
            Выделить телефон или электронную почту — это добрая половина юскейсов источника информации «сайт в интернете».
        • 0
          Да. Я лично от этого сифона отказался сразу, как увидел что там не работает выделение.
    • +1
      Кстати, в примере стало хуже чем было: ) шутка.

      Жаль, что сp1251 не работает, сложно рассматривать как инструмент для нового дизайна ресурса на cp1251.
      • 0
        Кстати, в примере стало хуже чем было: ) шутка.

        Возможно доля правды в этом есть, по части сглаживания. При генерации шрифта есть возможность поиграться с настройками, включая dpi, возможно это помогло бы добиться лучших результатов. Но надо посвятить некоторое время экспериментам.
      • 0
        Вы имеет ввиду неподдерживаются кириллические симолы? Я делал проект с использованием кириллицы
        • 0
          сорри, столько ошибок :-)
          • 0
            Спасибо за коментарий, проапдейтил пост.
        • 0
          Нет, я имел ввиду слова автора:

          «И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще вCP-1251 – ваши проблемы.»

          Я склонен ему верить: )
          • 0
            Да, у меня написано, что требуется исключительно UTF8 (это взято из документации), однако по ссылке автора комента используется кодировка cp1251, так что вполне возможно, что можно работать и с ней. Про тонкости лучше узнать у pgg, но результат — на лицо )
            • 0
              И правда cp1251. Очень обрадовало.

              pgg, спасибо!: )
              • 0
                Вам спасибо, очень дельное и возможно для кого-то полезное замечание.
              • 0
                На здоровье :-). Я просто сам разрабатываю подобрый проект поддержки любых шрифтов на вебе,
                и в тему проник глубоко.

                В моём случае не могу разобраться как же заставить работать .OTF фичи: капитель, минускульные и маюскульные цифры, а так же лигатуры.
                Может кто видел полную спецификацию OpenType шрифтов?
        • +2
          у Вас сайт протроянен. После стоит фрейм
          • 0
            парсер лохе. После <_/head_>
            • 0
              Шыт. У хостеров проблемы видимо.
    • –7
      все это было рассмотрено давным-давно на vremenno.net
      • 0
        Я поставил минус по той причине, что вы не указали прямую ссылку на «рассмотр».
      • НЛО прилетело и опубликовало эту надпись здесь
        • –1
          ой, вы уж простите, я на хабр захожу 2 раза в день и не имею возможности постоянно мониторить комменты под моими сообщениями.

          А по поводу того, что там кратко описаны typeface, cufon, sIFR и FLIR — так есть же оффсайты этих продуктов, на них руководства и примеры.
      • +7
        Я спасу тебя, хабрачеловек!
        http://vremenno.net/design/use-any-font-on-website/
        Подымайте ему обратно рейтинг )
        • 0
          Вам — спасибо за ссылку. Но там все же несколько поверхостно рассмотрено. Зато про все способы сразу.
          • 0
            Возможно. Мне этого хватило, чтобы рассмотреть самостоятельно typeface, cufon и sIFR. FLIR не рассматривал в принципе, так как, во-первых, на стороне сервера, а во-вторых (и в главных), отправляет картинки с сервера на клиента, существенно сжирая трафик пользователя. Не говоря уже о том, что при отключенной графике пользователь даже не поймёт, что произошло.

            На всё про всё ушло часа 2 с учётом поиска различных шрифтов, сложного вроде бы ничего нет. Разве что небольшие танцы с бубном вокруг sIFR. Так что дерзайте.
    • +2
      Я как раз такой скрипт использовал.
      Мне он показался самым удобным вариантом использования нестандартных шрифтов.
      пример
      Скрипт 16 Кб + Файл шрифта 51 Кб = 67 Кб
    • 0
      а кириллицу держит? и UTF8?
      • 0
        UTF8 — главное требование при использовании.
      • 0
        Поддерживает то, что есть в шрифте. Хоть Ленина и Серп с молотом отрисует, если в шрифте такие символы есть.
        • 0
          спасибо
          Ленина и Серп я как-то не очень
          просто кириллица нужна и знаки типа © ® и тд
    • 0
      Видимо текст с кастомным шрифтом нельзя скопировать :(
    • +1
      Зачем в IE использовать VML? Почему бы не использовать webfonts там?
      • +1
        Видимо для однообразия в подходах. Из шрифта делают SVG, который потом рендерят или на canvas или в VML. А так если бы для ИЕ webfonts, для сафари и других поддерживающих @font-face, то было бы намного геморнее. Надо и шрифт TTF выдавать и скрипт подключать… но если хочеться, то почему бы не сделать это руками. Вроде это не недостаток, а компромис.
        • +2
          Нужно ли тогда ругаться на «тормознутость и кривизну» IE, если в ней используется другая технология, взамен той, что предназначена для шрифтов? Кстати, я не слишком понимаю зачем рендерить в Canvas или SVG, почему бы картинкой не сделать?
          • 0
            Возможно и не надо ругаться на ИЕ. Инерция.
            А про вторую часть не понятно, картинкой, это в каком смысле?
            • +1
              Как-то не туда написалось. Ещё раз продублирую:

              Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?
              • +1
                Шрифт — векторный по своей натуре. Достаточно логично что он преобразовывается в векторный формат, который потом позволит широко управлять отображением его при помощи CSS.

                И дополнение про поддержу @font-face в ИЕ, я вот только что почитал, он хочет, что б ему давали файл в формате .eot (Embeded OpenType). Это уже не так интересно, как казалось на первый взгляд.
                • +1
                  А, вот оно что. Вектор. Но ведь Canvas это не вектор. Это тег, на который рисуется растр.

                  IE требует oet, почему бы и нет? Они изобрели web fonts, они были первыми. Чем плох этот формат?
                  • 0
                    ИЕ, изобрели — очень похвально, причем поддержка доступна начиная с версии ИЕ4, что еще круче.

                    eot — его недостаток в том, что это проприетарный формат. Safari не захочет eot, Firefox 3.5 не захочет eot.
                    • 0
                      Ну это же не причина, чтобы не поддерживать его в Cufón :)
                      • 0
                        Нет не причина, просто Cufón костыль и занимается не этим, нет смысла ему делать то, что браузер умеет без него.

                        А если имеется ввиду поддержку преобразования шрифта TTF в EOT, то «проприетарность» формата говорит о том, что технология его создания (преобразования) не свободна.
                        • 0
                          • 0
                            По ссылке находится «Member Submission», что не дает этому документу никакой официальной силы.

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

                            Кому надо:
                            Linux: code.google.com/p/ttf2eot/
                            Windows: www.microsoft.com/typography/WEFT.mspx
                            • 0
                              Там указана лицензия документа:

                              «This document is available under the W3C Document License. See the W3C Intellectual Rights Notice and Legal Disclaimers for additional information.»

                              Я не знаю что это, но, вероятно, это даёт какие-то права на использование этой информации.
                  • 0
                    EOT очень геморройно генерировать, прога от МС котораяэто делает, требует, чтобы страница была размещена на том же домене, где будет использоваться, скачивает эту страницу, генерирует привязанный к домену EOT файл, включая в него только использоавнные там символы, и даже пытается проавить HTML-код и вроде (по слухам) пытается закачать отредактированный файл обратно.
                    • +1
                      Вы как-то мистифицируете эту программу.

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

                      Шрифт привязывается к домену (простенькая защита от воровства шрифта).
                    • –1
                      К сожалению, в этом IE не одинок: Firefox 3.5 тоже привязывает шрифт (@font-face) к домену, если не использовать заголовки Access-Control в HTTP-отклике при отдаче шрифта. И видео (<video>) привязывает. Мозги, промытые правоторговцами.
          • 0
            Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?
            • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Да ничем не хуже, мне она даже больше нравится, только картинку лучше в PNG-8, или SVG (на сервере) делать имхо.

              Мне тоже идея рендерить шрифт яваскриптом кажется немного ненормальной, лучше сразу в HTML вставлять див с картинкой, через Image Replacement, или яваскриптом проходиться по заголовкам и заменять на картинки.
              • 0
                лучше сразу в HTML вставлять див с картинкой, через Image Replacement, или яваскриптом проходиться по заголовкам и заменять на картинки


                Здесь происходит практически тоже самое, за исключением задействования серверной части.
    • 0
      Не фонтан, конечно, но при острой необходимости юзать можно.
    • 0
      интересно, а что про этот метод думает Опера
      • 0
        С страницы проекта:

        The following browsers are supported:
        * Internet Explorer 6, 7 and 8
        * Mozilla Firefox 1.5+
        * Safari 3+
        * Opera 9.5+
        * Google Chrome 1.0+

        От себя добавлю:
        * Konqueror
        * Arora
        • 0
          Странно, что Opera 9.5, SVG «Опера» давно поддерживает.
          • 0
            Здесь важен не SVG, а canvas. SVG промежуточный формат в котором хранится шрифт перед его рисованием на canvas.
            • 0
              Что-то я вообще теряю нить.

              Зачем нужно это решение, если можно сразу, на стороне сервера, напечатать вектор на растр (TTF в PNG, например), зачем это делать на стороне клиента (TTF -> SVG -> Canvas)?
              • 0
                Это дает нам несколько приемуществ:
                * Нет необходимости в скриптах на серверной части (простой html сейчас тоже в ходу)
                * Есть возможность как угодно менять вид шрифта, из-за его векторного изначального представления, скрипт берет данные о необходимом размере, цвете и других параметрах шрифта из правил CSS для элемента к которому применяется. Таким образом нам надо всего один файл шрифта, для отображения его всеми возможными вариантами. Если же для этого лепить картинки на сервере, это убъет всю гибкость в использовании.
            • 0
              Не совсем так. SVG там, прямо скажем, не при чём.
              • 0
                В браузере — абсолютно непричем, а вот как технология — используеюся.
    • 0
      Что-то подобное я придумал давным-давно, но идею засрали…
      В принципе тут все описано webmonet.ru/category/nice/
      • 0
        Нее, не похоже. А вот на FLIR из ссылки seraph — похоже.
    • 0
      www.teqli.com/ru/ — не сочтите за рекламу, просто пример использования Cufon — замечательная вещь!

      Как раз недавно пользовался, дизайнер «подложил свинью» — в меню дизайнер использовал нестандартные шрифты, а клиенту очень понравилось. Пришлось искать варианты, таки нашел :).
    • 0
      В шрифтах большое значение имеет хинтинг, без него шрифты на экране выглядят расплывчатыми и неравномерными.

      Надо отдать должное — кернинг они сделали.

      Вообще человеческое общество — забавная вещь — проблеме со шрифтами в вебе уже лет 10, даже больше, но всякие нюансы чисто общественного характера не позволяют ее решить.
      • 0
        … потому, что полно других IE проблем…
    • 0
      Это все надо делать в конце страницы, нечего ждать пока эта лабудень загрузится. И да, это изврат (+ возможные тормоза при прорисовке, все таки яваскрипт небыстр).
    • 0
      а это все с поисковиками дружит?
      • 0
        Дружит.
        • 0
          Действительно, чего бы ему и не дружить?)
    • 0
      Он отличается принципиально чем-то от typeface.neocracy.org/?
      Сравнений никаких не видели?
    • +1
      Исправьте,

      Страница проекта на github
      • 0
        Спасибо, поправил.
    • 0
      Пробовал СИФР, с использованием плагина под Jquery, радовался до слез. Потом полез на другие машинки посмотреть сайт и испугался, у одного тазика рендер тормазил на другой вообще ничего не было, как будто бы JS не работало. Пришлось отказаться, что-то думается что будет глючить.
    • +1
      Прощай, производительность )

      Зря вы хороните @font-face: IE6, FF 3.1, Opera 10, Webkit — все умеют делать внедрённые шрифты. Хуже или лучше, но уже вот-вот.

      На самом деле, вот очень перспективный проект: Typekit
      • 0
        Так его ж не хоронят ) Его ждут. Вот-вот.
        • 0
          Ну, вы всё равно как-то походя упомянули самый прямой и перспективный способ )
      • –1
        Добрый совет: обратите внимание, что ужé не FF 3.1, а FF 3.5 (его перенумеровали в бóльшую сторону, чтобы достойно отразить величину внесённых изменений).
    • 0
      a:hover работать будет? кто-то уже пробовал?
      • 0
        Если менять фон под текстом — сработает. Если менять цвет текста — надо использовать JS для вызова рендерера с измененными параметрами.
    • 0
      отключая картинки — шрифтов не видно на странице?
      • 0
        Смотря как браузер расценивает canvas. Опера для примера не показывает.
    • 0
      Я использовал на одном из сайтов этот скрипт, генерил он как надо все, но почему-то сгенерированные тексты по слоям выше, чем все остальное и перекрывали меню сайта...(
      • 0
        Видимо косяки в вёрстке. В моих проектах всё отлично.
      • 0
        Перекрывало меню сайта в ИЕ? Правильно?
        Дело в том. что заменяемый текст помещается в SPAN, для которого прописывается position:relative, а ИЕ при порядке отображения таких элементов не обращает внимания на z-index, а основывается только лишь на порядке их следования в документе. Т.е. для решения вашей проблемы надо сделать так, что б меню в файле было описано позже любых элементов с position:relative. Как этого достигнуть, это уже детали, можно для пиремара при показе меню чикать JSом и вставлять в конец документа, с соответствующим абсолютным позиционированием.
        • 0
          Вот то и странно, что проблема возникла в ФФ, в ИЕ даже не смотрел, наверняка еще хуже. Мы использовали там выпадающее меню, а когда происходило его выпадание, как раз оно получается накрывалось текстом, выделенным с помощью данного скрипта.
    • 0
      адепты скриптов, которые стараются сделать на стороне клиента то, что можно сделать на стороне сервера, уже начинают надоедать. пользуетесь — пользуйте тихо. не надо болото разводить.
      у «бритвы Оккама» спросите если не понимаете.
      • 0
        Зачем делать на стороне сервера то, что можно делать на стороне клиента? В любом случае, выбор из множества вариантов — только нам же на пользу. Хотим там, делаем, хотим не там, делаем здесь.

        Кроме того, для метода например, как в нижеописанном коментарии всеравно используется скрипт на стороне клиента, который идет на сервер за картинками. Так зачем же, раз уж мы используем скрипт, ходить еще и на сервер?!?

        Ну и еще одна реплика: зачем нагружать свой сервер лишней работой, если за него эту работу может выполнить браузер клиента?
        • +1
          Который подчас сильнее самого сервера, даже если это VPS
    • –1
      Кроме пяти методов, упомянутых в начале хабратопика, есть ещё один: создание картинок (содержащих текст) не своими руками, а джаваскриптом, обращающимся к серверной библиотеке рисования картинок.

      Вот пример такого подхода:

      facelift.mawhorter.net

      Я упоминаю о нём для полноты картины, а не для пропаганды и не для «священной войны» между методами.

      Тем не менее, векторный образ сложного шрифта может весить больше, нежели растр короткого слова (или даже пары-тройки-другой слов), так что именно растровое серверное решение может оказаться практически полезным во многих случаях.
    • 0
      прикрутил его вот сюда, для интереса — fest.fm-kharkov.org.ua/
      это если кому интересно, как оно работает в средне-больших объемах текста.

      п.с. нормально работает. Опера, ФФ, старенький компьютер.
    • 0
      А как с ним работать когда нужны русские буквы а в шрифте их нет?
      • 0
        Так формируйте свой шрифт с русскими буквами.
        Я, к примеру, для своего нового сайта сделал js для фонта Cuprum. Все отлично работает.
    • 0
      В статье забыли упомянуть про часто нужную возможность псевдоклассов, пришлось еще и по ссылке на оригинал перейти (изначально ее преподнесли как описание градиентной заливки,
      … есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства…


      Так вот a:hover у куфона есть, но по дефолту отключено, надо указывать примерно так:
      Cufon.replace(".navbar a", {hover: true});
      


      А вот с h1:first-letter такая штука не прошла, пришлось выкручиваться, оборачивая первую букву в span.

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