Пользователь
0,0
рейтинг
11 марта 2009 в 11:46

Разработка → Используем любой шрифт с Javascript.

Все мы знаем прекрасные библиотеки sIFR3 и FLIR, которые на лету помогают использовать любой шрифт на веб-страницах.
Правда, с моей точки зрения, их использование (а именно установку и настройку) нельзя считать легким трудом.

Сегодня я расскажу о библиотеке Typeface.js, которая, как видно из названия, работает на чистом JavaScript.


Немного теории


Официальный сайт библиотеки Typeface.js — http://typeface.neocracy.org/. На этом ресурсе можно найти всю дополнительную информацию.

Как это работает


Библиотека основывается на встроенных в браузер возможностях отрисовки векторной графики. Уже довольно долгое время браузеры поддерживают отрисовку векторной графики, Firefox имеет поддержку обьектов canvas и SVG, а IE поддерживает VML. Поддержка браузеров, заявленная разработчиком Дэвидом Честером (David Chester): Firefox 1.5+, Safari 2+, Internet Explorer 6+.
Библиотека состоит из двух компонентов: perl модул для конвертирования truetype шрифтов в векторные координаты и javascript-файла, который рендерит текст в браузере используя векторное описание шрифтов.

Преимущества


  • Самое главное — отсутствие Flash. Всё работает на встроенных возможностях браузеров (при чем даже не самых последних версиях).
  • Быстрая и простая установка. Не нужно разбираться в тонкостях более «навороченных» sIFR и FLIR.
  • Текст видим как «текст», его можно выбрать, скопировать и т.д. Поисковики обрабатывают всё именно как текст. Правда, выбрать текст можно только в браузерах, поддерживающих canvas
  • Поддержка всех свойств текста в CSS2. (font-size, letter-spacing, font-stretch, font-weight, line-height и т.д)


Пример


Подготовка


  • Качаем библиотеку и заливаем к себе на сервер в папочку /js/
  • Далее нужно конвертировать нужный truetype шрифт с помощью «Convert a Font» или качаем себе perl моудль.
  • Поместим полученный в результате конверта файл .js в папочку с библиотекой.


Процесс


  • В <head> документа помещаем
    <script type="text/javascript" src="js/typeface-0.11.js"></script>
    <script type="text/javascript" src="js/moj-font.typeface.js"></script>
    , где moj-font это тот документ, который мы получили в результате конвертирования.
  • ВАЖНО! Все css-файлы должны быть подгружены перед подгрузкой библиотеки. Это архиважно, иначе результата не будет.
  • В <body> документа любому слою, в котором нам нужно присвоить тексту выбранный шрифт, ставим класс typeface-js.
    <div class="myclass typeface-js" style="font-family: ALSAgrus; font-size:40px;">
          Хабрахабр.ру
    </div>
  • Стиль можно задать как в атрибуте стайл, так и в css. Font-family должен быть названием шрифта, подгруженного с библиотекой. Для справки, правильное название можно посмотреть внизу конвертированного js файла с векторным отображением шрифта.

Всё, можно загружать страницу в браузере и смотреть результат!
А вот пример такой страници целиком:
blockquote>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>Хабрафонт</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     
  7.     <script type="text/javascript" src="js/typeface-0.11.js"></script>
  8.     <script type="text/javascript" src="js/als_agrus__regular.typeface.js"></script>
  9.     
  10.   </head>
  11.   <body>
  12.   
  13.     <div class="myclass typeface-js" style="font-family: ALSAgrus; font-size:40px;">
  14.       Хабрахабр.ру
  15.     </div>
  16.     <div>
  17.       Сверху мы видим обычный текст, обработанный <br /> библиотекой Typeface.js в шрифт ALS Agrus
  18.     </div>
  19.  
  20.   </body>
  21. </html>


Для примера я использую платный шрифт ALS Agrus для того, чтобы увидеть результат в более сложных шрифтах. То, что получилось у меня, можно увидеть на картинке в топе.
Вадим Жерновой @zhernovoi
карма
26,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

Комментарии (44)

  • +2
    Спасибо, действительно хорошая реализация :)
    • +1
      >>То, что получилось у меня, можно увидеть на картинке в топе.
      А на какой-нибудь страничке в браузере можно увидеть?
      Одно дело — Safari в Mac OS X, и другое дело — Firefox в Ubuntu :)
      • –2
        Более широкий выбор превью — typeface.neocracy.org/examples.html. Там же уже и есть с разными свойствами CSS.
      • 0
        А свою ссылку не публикую, так как не хотелось бы проблем с правообладателем шрифта. Ведь можно сразу скачать конвертацию шрифта и юзать спокойно. Потому и боюсь постить не в условях продакшена.
        • 0
          Вы на улицу выходить тоже боитесь? А жить не страшно? Говорят, от этого умирают!!!111
          • –1
            Ну, я считаю что мои причины обоснованы. Если нужен пример, выставлю с любым другим шрифтом. Вопрос исчерпан?
            Если интересно, то однажды мне уже были предьявлены претензии правообладателем одного шрифта (юр. лицом) после того, как я отдал несколько работ в типографию. А по условиям лицензии для машин типографии нужно покупать отдельную лицензию.
            • +4
              Я вас прощу. Есть же тысячи бесплатных шрифтов. Вот например. Их там 6000.
              К чему отмазки. Пример в студию! А то те, что по ссылке на neocracy — невзрачные примеры
  • 0
    Круто. Сразу два вопроса:
    1. А на сколько это увеличивает вес страницы?
    2. А можно ли крутить текст, повернуть на 90 градусов влево, например?
    3. Даёт ли он дополнительную нагрузку на браузер (тормозить не будет, если, например, его использовать очень много)?
    4. Планируется ли сделать поддержку выделения такого текста в IE?
    • +36
      * Получилось четыре)))
    • +3
      Ну,
      1. Сейчас пытаюсь средстави firebug-а и webkit-а провести некоторые собственные тесты в этом навправлении как и в сравнении с обычной страницей, так и с sIFR и FLIR. Детали потом в камментах.
      2. Ну я не разработчик библиотеки, не ведаю. Теоретически, можно сделать всё, что позволяет сделать CSS с текстом, а в нём поворота вроде не было.
      3. Дополнительную нагрузку даёт, опять-же6 проведу тесты. Очень много использовать не рекомендует автор — «Performance is fairly good for usage with page titles and headings for instance, but you'll probably find using typeface.js for body text to be too slow. „
      4. Да, пишет, что в последующих версиях будет пытаться сделать “Better support for selecting text
      (currently you can select in some browsers but there's no highlighting)» и «Speed improvements, especially for IE»
      Вообще, это всего версия 0.11, поэтому всё еще впереди, но для обычных нужд она вполне хорошая альтернатива другим реализациям такого рода.
      • 0
        >Теоретически, можно сделать всё, что позволяет сделать CSS с текстом, а в нём поворота вроде не было.
        Ну SVG крутить вроде как должно быть можно, только вот видимо придётся для этого лезть в код этой библиотеки.

        А так очень бы помогло всяким там вертикальным меню и т.д.
  • +1
    Не работает в Опере, верно?
    • 0
      Верно, тестил в 9.62 — не работает, отображается обычный текст. Но, надеюсь, в последующих версиях будет поддержка (Опера ж вектором умеет рисовать?)
      • 0
        И это при том, что опера поддерживает и canvas и начиная с десятки — кастомные шрифты в css.
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Причём поддерживает на довольно высоком уровне, выделяясь, как каогда то выделился IE со своими фильтрами и переходами.
      • +1
        Вот, только что протестировал, всё вроде бы рабтоает замечательно:



        Фонт Danube
  • 0
    Несмотря на некоторую вторичность содержимого топика, все же перенес его в соответствующий блог.
    • 0
      Спасибо, не хватало прав для переноса в профильный блог…
  • +2
    Автор, былобы неплохо вставить ссылку на пример
    • 0
      Есть на сайте разработчика. Там же виден и большой недостаток: нельзя выделить и скопировать текст.
      • 0
        Смотря в каком браузере. У меня в Сафари все работает отменно. Но да, в огнелисе действительно нет.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Зачем нужно в IE делать через VML, когда там @font-face работает?
    • 0
      Междустрочные и межбуквенные интервалы
      • 0
        Это letter-spacing/line-height? Они поддерживается в IE.
    • 0
      Internet Explorer внутри @font-face использует свой собственнический (proprietary) формат, называющийся Embedded OpenType. (Об этом на en.wikipedia.org/wiki/Font-face и на www.css3.info/preview/web-fonts-with-font-face/ рассказано поподробнее.)

      Формат этот не совместим покамест ни с одним другим браузером, кроме IE. И подозреваю, что по той же причине (закрытость реализации EOT-файлов) автор библиотеки Typeface.js не смог придумать никакого кросс-платформенного способа преобразовать TrueType в Embedded OpenType при помощи языка PERL, им избранного.

      Впрочем, в статье en.wikipedia.org/wiki/Embedded_OpenType сказано, что WEFT (Web Embedding Fonts Tool, майкрософтовский преобразователь шрифтов) способен преобразовывать TrueType в Embedded OpenType. Это плюс. Однако разумно предполагать, что WEFT требует Windows для запуска, это как минимум. Кроме того, ещё вопрос, допускает ли лицензия WFT запуск этой программы через Паутину перлом для всех желающих.
      • 0
        Да, я знаю, что формат у них свой. И ответов на заданные вопросы у меня нет. Но я всё-таки делал бы web fonts для браузеров, которые его понимают и уже, если поддержки web fonts нет, его эмуляцию.

        Причина проста — web fonts быстрее работают.
  • 0
    Если в «конвертор» шрифтов загрузить не шрифт, вываливается интересная ошибка :)
  • 0
    > Правда, выбрать текст можно только в браузерах, поддерживающих canvas
    После этого, дальше можно не читать.
    • +3
      Стандартные шрифты пока никто не отменял и они на то и стандартные, чтоб этот самый текст можно было выделять, а так — очень хорошая замена тем моментам, когда надо было всё таки писать текст на картинке. Налицо — для правильного подхода к этому делу — одни приемущества.
      Это ведь для оформительства а не для того, чтоб вы у себя всё в другом шрифте видели. Я так думаю, что когда у вас шрифт был в картинках — то способности к выделению у него никак не больше было.
      А стандартные шрифты были выбраны и стандартизированы для того, чтоб придать читаемому тексту наибольшую читабельность (извините за каламбур)
  • +1
    Спасибо, отличная статья. Только одно нужно ли оно на самом деле? Каждая такая возможность реализовать безграничную дизайнерскую шизофрению фантазию пугает. Нужно обходиться стандартными шрифтами, для остальных — графика и в ней надписи со шрифтами, какие душа пожелает.
  • 0
    Спасибо. Только исправьте: perl модуль
  • 0
    Cufon гораздно лучше. Он нормально работает с оперой, и имеет нормальный API, в отличие от typeface.js. Плюс в конверторе можно выбрать только нужные символы.

    Кстати, нагерененные шрифты не выделяются, и ведут себя как картинка. Canvas всё-таки.
    • 0
      Единственный недостаток cufon — он на 20% увеличивает время загрузки страницы
  • 0
    В Internet Explorer 8 RC1 не работает вообще
  • 0
    хотелось бы мааааленькое совсем неважно дополнение о весе библиотеки и сравнении веса с другими аналогами:)
  • 0
    У typeface.js есть огромный недостаток, из-за которого мной для реализации подобного дела был выбран cufon. Он не все шрифты конвертирует, а только те, про которые известно, что МОЖНО конвертить. В противном случае выдаётся сообщение, что мол «владелец шрифта запретил и т.п.». Это при том, что я владею этим шрифтом (купил его и могу использовать в дизигне).

    Зы. Как у typeface-а с интеграцией в jQuery/prototype и прочие? У cufon-а это есть, что несказанно порадовало.
    • 0
      Хм, интересно. Я использовал платный Agrus, никакой ошибки не было.
      По поводу интеграций — не было возможности проверить в полевых.
    • –1
      Выше на habrahabr.ru/blogs/javascript/54109/#comment_1443950 как раз обсуждаются возможные юридические проблемы со шрифтом, который дизайнером куплен, но итоги «конвертации» которого, получается, теперь всем можно будет скачать бесплатно.

      Вообще, переход Паутины к загружаемым шрифтам создаёт неимоверную бездну пограничных случаев. Вот пара-тройка достойных пристального обдумывания.

      1) Шрифт можно использовать для себя, но нельзя выкладывать в Сеть ни в каком виде. Соответственно, чисто серверные решения (то есть facelift.mawhorter.net/ и ему подобные) годятся, остальные нет.

      2) Шрифт можно выкладывать как есть, но нельзя конвертировать (преобразовывать). Соответственно, чисто браузерные решения (то есть www.css3.info/preview/web-fonts-with-font-face/ для свежих Safari и грядущих в этом году Opera и Firefox) годятся, остальные нет.

      3) Шрифт можно выкладывать в Сеть в каком угодно виде, но нельзя дорисовывать. Соответственно, годятся какие угодно решения до тех пор, пока при попытке использовать какой-нибудь нечастый символ (букву ять, знак евро, черкесскую палочку) возникнет адовый затык.
  • +1
    Животрепещущая тема для меня в этот момент, посему еше один вопрос:
    В cufon'е — выделение текста подключивает (от браузера к браузеру по-разному). Мееееедленно работает. Да и ссылки не всегда подчеркиваются :) У typeface-а с этим лучше?
  • 0
    А как со скоростью?
  • 0
    Реализация подобных вещей через SVG/VML имеет громадный недостаток перед Flash-решениями — нельзя такой текст выделять. По этой причине я бы всё равно предпочёл sIFR.

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