Пользователь
0,0
рейтинг
1 июня 2009 в 13:38

Разработка → 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
Zada @Zada
карма
126,5
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (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
        Сорри, позабыл.
  • 0
    a:hover работать будет? кто-то уже пробовал?
    • 0
      Если менять фон под текстом — сработает. Если менять цвет текста — надо использовать JS для вызова рендерера с измененными параметрами.
    • +1
  • 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.

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