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
                                                                  По ссылке находится «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.

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