Нестандартные шрифты на холсте Canvas.
 

Всем привет.
Недавно начал экспериментировать(в первые для себя) с различными манипуляциями над тегом Canvas и задался одним вопросом:
Можно ли как то отображать на холсте нестандартные шрифты?(при условии, что они заранее не установлены на компьютере естественно.)
(Не используя картинки!)
Можно ли как то задействовать в этом плане сервис Cufon?
Если да - то как именно?
(Имею ввиду как именно все это дело подключать? Это же не элементы dom дерева, насколько я понимаю?)
Возможно так же существует какая то альтернатива в этом плане?
P.S. Заранее благодарен за ответ..

Думаю можно. Он ведь создает js-объект на основе шрифта если правильно помню. Можно поковыряться в исходниках cufon и разобраться как можно писать текст имея такой шрифт.
Но возможно есть и проще решения. Кстати, а разве писать подключенными через @font-face шрифтами нельзя?

Пробовал - но лично у меня подключить не получилось.
(Хотя при подключении к другим блокам всё работает нормально. Если с винта подгружать.)
Вот пример:
В самой рамке находится canvas(к шрифту попытался подключить оформление через font-face.) а с лева от неё для примера тег span также c подключенными через font-face шрифтами.
http://webmaster.ayrveda.ru/fonts2/canvas.html
Правда сейчас на хостинг файл закинул и увидел что всё совсем по другому смотрится..
В каждом браузере по разному.
Но на холсте сами шрифты(именно в канвасе) пытаются отображаться только в хроме! И только только после неоднократной перезагрузки страницы.. (хотя с компа ничего не отображается на холсте. Только левый блок со спаном работает в норме.)
В мазилле + ie наоборот с компа Span в норме - но с хостинга не работает..
P.S. Возможно причины в путях - но перепробовал вроде все варианты.
Хотя тоже самое происходит и с демо версией шрифта.
http://webmaster.ayrveda.ru/fonts2/orbitronio-demo.html
(Значит с моей стороны ошибок по идее нет. Это хостинг наверное как то конфликтует с этими файлами..)
Ну да бог с ним. Здесь хотя бы в теории разобраться, что бы с винта всё работало в норме..

Хардкорный вариант: самому сгенерировать из шрифта картинку(вектор) + объект с описанием позиций, кернинга итд.=))

Но на самом деле готовые варианты точно есть, надо просто хорошенько погуглить "html canvas font".(например)

Спасибо за ссылку - но к сожалению мне не удалось разобраться что там вообще происходит? ))
(То есть какая цель этого кода?)
Закинул код в свой редактор - открыл в браузере и что дальше? ))
(ничего не понял.)
То есть я понимаю, что что то там(шрифты) попадает на холст после клика по кнопке - но детали мне не ясны.
P.S. C инглишем пока дружу не очень - поэтому гуглить могу только по русскоязычным ресурсам. (Чем сегодня собственно и занимался. Но к сожалению безрезультатно.)

Ты рисуешь на канвасе когда шрифт еще не подгружен. Поэтому нужный шрифт отобразится только если он закэширован браузером.
Кроме того, у тебя неправильные заголовки Content-Type. Хром по-видимому их игнорирует, а лис - нет.
Так что если исправить заголовки и дожидаться загрузки шрифта - все будет работать. Другое дело - как дождаться этой самой загрузки.
Как вариант - внедрять шрифты через data:uri. Разумеется это будет отличный вариант только для поддерживающих woff браузеров.

Спасибо!
P.S. А в чём ошибка Content-Type?
В том что он не заполнен?
(я так понимаю речь идёт о <meta content="" name="keywords">
<meta content="" name="description">)
Такая конструкция проходит валидацию насколько мне известно..
(Или я что то упустил?)

А JQ + JS такими возможностями не располагают?
(просто я далеко не спец. в этом направлении..)

Уфф, лучше просто показать:


Что такое JQ ?

JQuery.
P.S. Не совсем разобрался, что означают индикаторы на дополнении к браузеру(на сколько я понимаю.)
Тоесть как понять(по этому скрину) в чём ошибка content-type?

В том что сервер отдает шрифты под видом простого текста (text/plain) а не шрифта. Тебе нужно научить сервер (гугли) выставлять правильный mime-тип для woff (гугли)
С чего ты взял что jQuery может добавить новые функциональные возможности движку браузера?

Ok. Большое Спасибо!

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

Проблема в том что шрифт подключается через css, а не через DOM (как link или script). Так что никакого события load нет. Нужно ухищряться как-то. Например подключать файл шрифта через img/object/script/iframe, у которых можно отследить событие загрузки. Но проще конечно заембедить через data:uri. Вот только woff не все браузеры понимают (смотри caniuse.com )

Понял. Спасибо.

Смотрите:
воспользовался настройками из следующей ссылки:
http://www.xiper.net/collect/server/...s/addtype.html
добавил их в свой хостинг и теперь часть моего .htaccess файла выглядит следующим образом:
http://ayrveda.ru/webmaster/mime_tipe_for_hosting.jpg
Но! Всё по прежнему не работает.. (IE + Mazilla)
http://webmaster.ayrveda.ru/lessonCanvas/canvas.html
(Хотя с винта именно эта реализация работает во всех браузерах без проблем. C хостинга на яндекс народе тоже!
http://yamaradg.narod2.ru/Canvas/canvas.html)
Ещё заметил, что на этом хостинге(sprinthost.ru) не срабатывает плагин на JQuery PIE! (Для закругления углов в браузерах ie-7,8.)
P.S. C чем всё это может быть связано?