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

[Yamaradg]

Всем привет.

Недавно начал экспериментировать(в первые для себя) с различными манипуляциями над тегом Canvas и задался одним вопросом:

Можно ли как то отображать на холсте нестандартные шрифты?(при условии, что они заранее не установлены на компьютере естественно.)

(Не используя картинки!)

Можно ли как то задействовать в этом плане сервис Cufon?

Если да - то как именно?

(Имею ввиду как именно все это дело подключать? Это же не элементы dom дерева, насколько я понимаю?)

Возможно существует какая то альтернатива в этом плане?

P.S. Заранее благодарен за ответ..

[wwt]

Подгружайте сами вебшрифты и используйте их в canvas

[Yamaradg]

Подгружайте сами вебшрифты и используйте их в canvas

А вы не могли бы описать(примерно) список действий относительно того, как именно всё это делать?

(Если можно по конкретнее. То есть какие файлы подключать, какие нет. Возможно есть какие то особенности в подключении?)

Был бы вам очень признателен..

[wwt]

Есть сервисы для генерации вебшрифтов, к примеру:

http://www.google.com/fonts/

http://www.fontsquirrel.com/tools/webfont-generator

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

У гугла насколько помню после выбора шрифта снизу можно скопировать код для подключения.

[Yamaradg]

Есть сервисы для генерации вебшрифтов, к примеру:

http://www.google.com/fonts/

http://www.fontsquir...bfont-generator

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

У гугла насколько помню после выбора шрифта снизу можно скопировать код для подключения.

Дело в том, что я пробовал подключать обычным способом шрифты через Cufon, а также Font-Face но на холсте сanvasa это не работает.

Как мне объясняли на одном из форумов - это связано с тем что шрифт подгружается на холст позже чем, весь холст уже загружен..

(И там в общем нужна какая то химия! Что бы это действительно работало.)

[lexxcode]

Ну вот довольно просто подключается сторонний шрифт в canvas

http://jsfiddle.net/alexriz/g7uTW/

[Yamaradg]

Ну вот довольно просто подключается сторонний шрифт в canvas

http://jsfiddle.net/alexriz/g7uTW/

А вы не могли бы что то по навороченней подгрузить из шрифтов?

Просто мне кажется, что сейчас на холсте вполне обычный шрифт отображён.

P.S. Например шрифт Orbitronio было бы неплохо увидеть..

(http://www.azfonts.ru/load_font/orbitronio.html)

[lexxcode]

нету Orbitronio, а конвертировать лень

Ну вот понавороченней http://jsfiddle.net/alexriz/zvdDV/

[Yamaradg]

нету Orbitronio, а конвертировать лень

Ну вот понавороченней http://jsfiddle.net/alexriz/zvdDV/

Вот так это дело у меня отображается:

http://ayrveda.ru/we...anvas/fonts.jpg

(То есть, как я понимаю шрифт не функционирует..)

По всей видимости он установлен на вашем компе и поэтому у вас всё в норме..

P.S. А что вы имели ввиду под конвертированием?

(просто загнать шрифт на серивис типа Сufon или Font-Face + сгенерировать?)

Edited March 26, 2013 by Yamaradg

[lexxcode]

Нет, у меня нету этого шрифта в системе.

Теперь работает. Там просто дело в том, что нужно дожидаться когда загрузится страница полностью. т.к. на момент готовности DOM, шрифт еще может быть не подключен

[Yamaradg]

Нет, у меня нету этого шрифта в системе.

Теперь работает. Там просто дело в том, что нужно дожидаться когда загрузится страница полностью. т.к. на момент готовности DOM, шрифт еще может быть не подключен

Ага. теперь вижу. Это получается вы через Font-Face подключали - но таким образом что бы шрифты с хостинга(вашего) подгружались?

(в формате woff, ttf, svg, eot)

P.S. Я пробовал подгружать их с компа и это дело не работало на холсте..

(Хотя на других блоках всё функционировало.)

Буду ещё раз пробовать подключать это дело. Видимо я что то упустил из виду..

Edited March 26, 2013 by Yamaradg

[lexxcode]

Да конечно через @font-face, просто тяну из http://webfont.ru/ , т.к. так проще подключать в jsFiddle.

Но разницы нету, можно и с локального хоста грузить. Если открывать страничку не с сервера, а так просто с папки на компе, то хз, может и не работать.

[Yamaradg]

Да конечно через @font-face, просто тяну из http://webfont.ru/ , т.к. так проще подключать в jsFiddle.

Но разницы нету, можно и с локального хоста грузить. Если открывать страничку не с сервера, а так просто с папки на компе, то хз, может и не работать.

Но я смотрю всё равно этот метод даёт сбои потому, как в хроме у меня отображается только обычный шрифт, а в Safary шрифт вообще отсутствует.

(Пробовал и долго ждать и много раз перезагружать браузеры - но результат тот же!)

http://ayrveda.ru/we...nvas/fonts2.jpg

http://ayrveda.ru/we...nvas/fonts3.jpg

(IE лично у меня эту страницу вообще открывать отказывается! Может это конечно как то с самим сервисом http://jsfiddle.net связано. Я им не пользуюсь, поэтому не в курсе.)

(Пользователя и главное Заказчика такой вариант вряд ли будет устраивать, я думаю..)

Получается, что все равно нужна какая я то химия.

P.S. На одном форуме мне говорили сдедующее:

'Ты рисуешь на канвасе когда шрифт еще не подгружен. Поэтому нужный шрифт отобразится только если он закэширован браузером.

Так, что если дожидаться загрузки шрифта - все будет работать. Другое дело - как дождаться этой самой загрузки.

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

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

Что скажите?

Edited March 26, 2013 by Yamaradg

[lexxcode]

задал задачку...

Проблема в том что шрифт подключается через css, а не через DOM (как link или script). Так что никакого события load нет.

Не совсем, onload событие срабатывает именно когда подгружается весь документ, включая графику, css, скрипты, и все импорты. Картинки оформления те же подключаем через css, и onload ждет когда и они загрузятся, так же собственно и с шрифтами.

Последний мой вариант, нормально работает в Chrome и Firefox, в Опере иногда не подключается, в IE чаще, а в Safari да не работает, при чем стандартный шрифт нормально отображается.

Но как-то вывести можно и там 100%, у cufon же это получается

Вот этот пример работает везде где поддерживается canvas http://fiddle.jshell.net/alexriz/F47E2/show/

Я просто добавил задержку перед рендером в canvas. Такое впечатление, что шрифт загружен (о чем свидетельствует срабатывание события), но еще не готов для применения на странице

[Yamaradg]

Большое Спасибо за ответ! Проверил ваш последний вариант и у меня он работает во всех браузерах!

(В том числе и в Safary.)

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

P.S. По фаербагу я смогу весь JS(+ остальной) код скачать?

(Имею ввиду что бы он был в оригинале! Просто бывает, что иногда для адекватности(правильности) кода(js) лучше иметь исходники...)

Edited March 27, 2013 by Yamaradg

[wwt]

Большое Спасибо за ответ! Проверил ваш последний вариант и у меня он работает во всех браузерах!

(В том числе и в Safary.)

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

P.S. По фаербагу я смогу весь JS(+ остальной) код скачать?

(Имею ввиду что бы он был в оригинале! Просто бывает, что иногда для адекватности(правильности) кода(js) лучше иметь исходники...)

В ссылке уберите show в конце и увидите весь код в песочнице http://fiddle.jshell.net/alexriz/F47E2/

=))

[Yamaradg]

В ссылке уберите show в конце и увидите весь код в песочнице http://fiddle.jshell.../alexriz/F47E2/

=))

Cпасибо!

[Yamaradg]

Вот этот пример работает везде где поддерживается canvas http://fiddle.jshell...riz/F47E2/show/

Я просто добавил задержку перед рендером в canvas. Такое впечатление, что шрифт загружен (о чем свидетельствует срабатывание события), но еще не готов для применения на странице

Смотрите:

Пробую убирать обычный HTML блок(<div class="t">Test text in div</div>) в вашем примере(и у себя тоже на компе пробовал аналогичные действия проводить!)

и получается, что если его нет - то на canvase всё это дело тоже не работает!

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

Чем это может быть обусловлено?

P.S. Если прописывать диву {display:none;} то конструкция тоже не работает!

(Остаётся абсолютное позициониорование с маргинами в -9999px применять, по всей видимости..)

Edited March 27, 2013 by Yamaradg

[wwt]

Есть библиотека для подгрузки шрифтов https://developers.g.../webfont_loader

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

Может поможет.

Еще вот плагин для jQuery нашелся http://code.google.com/p/jquery-fontavailable/ который проверяет поддерживает ли браузер указанный шрифт, теоритически если поддерживает то шрифт уже должен быть загружен и готов для использования. Ну это тестить нужно.

Edited March 28, 2013 by wwt

[Yamaradg]

К сожалению я в инглише не очень то силён - поэтому мне практически ничего(в плане описания) по ссылке не ясно.

P.S. А у вас нет идей как можно через Сufon это дело подключить?

Обычно допустим для подключения используется такая конструкция:

Cufon.replace('span', {
fontFamily: 'orbitronio',
color:'#ff9538',
fontSize:'14px',
hover:'true'
});

Но к элементам canvasa такое не применимо, насколько я понимаю?

Еще вот плагин для jQuery нашелся http://code.google.c...-fontavailable/ который проверяет поддерживает ли браузер указанный шрифт, теоритически если поддерживает то шрифт уже должен быть загружен и готов для использования. Ну это тестить нужно.

То есть я не совсем понял?

Вы хотите сказать что всё что браузер в состоянии прорисовать - при помощи этого плагина отобразить можно?

(имея шрифты в наличии..)

А для элементов canvasa это дело подгрузить можно будет?

Edited March 28, 2013 by Yamaradg

[wwt]

Ну вот вам пример как работает webfontloader

http://fiddle.jshell.net/F47E2/5/

[Yamaradg]

Ну вот вам пример как работает webfontloader

http://fiddle.jshell.net/F47E2/5/

Всё вроде как(на первый взгляд) неплохо.

Но! браузер IE отказывается у меня отображать шрифт velesbold!

(как на холсте так и в теге заголовка..)

http://webmaster.ayr...sbold_error.jpg

Edited March 28, 2013 by Yamaradg

[wwt]

Ну вот вам пример как работает webfontloader

http://fiddle.jshell.net/F47E2/5/

Всё вроде как(на первый взгляд) неплохо.

Но! браузер IE отказывается у меня отображать шрифт velesbold!

(как на холсте так и в теге заголовка..)

http://webmaster.ayr...sbold_error.jpg

Что-то мн еподсказывает что сам код тут не причем. Нужно копать в сторону CSS файла подключения . гугл то отдает шрифт нормально и контент тайп у него font/eot а вот второй сервис отдает шрифт в формате eot как обычный octet-stream может в этом и дело. фик знает

Попробуйте сгенерит ькакойнить шрифт через сервис http://www.fontsquirrel.com/tools/webfont-generator

И использовать его на своем сайте, не подгружат ькороче шрифты со сторонних сервисов.

Edited March 28, 2013 by wwt

[Yamaradg]

Что-то мн еподсказывает что сам код тут не причем. Нужно копать в сторону CSS файла подключения . гугл то отдает шрифт нормально и контент тайп у него font/eot а вот второй сервис отдает шрифт в формате eot как обычный octet-stream может в этом и дело. фик знает

Попробуйте сгенерит ькакойнить шрифт через сервис http://www.fontsquir...bfont-generator

И использовать его на своем сайте, не подгружат ькороче шрифты со сторонних сервисов.

Дело в том что я пробовал подгружать шрифты со своего компа по вот этому примеру:

http://fiddle.jshell...riz/F47E2/show/

Но, как я уже говорил там обязательно нужно дополнительный блок с соответствующим шрифтом подгрузить!

(при этих условиях во всех браузерах всё в норме..)

Edited March 28, 2013 by Yamaradg

[Justnewone]

Канвас вообще не для этого. Он хоть типа вектор - на самом деле реузльтатом его работы будет немасштабируемая растровая сущность. Не верите - попробуйте в ретине глянуть.

Для установки нестандартных шрифтов есть очень велосипедистый велосипед, перевелосипедить его будет крайне трудно, называется он фонтсквиррел.

И так, канвас для канвасных дел, а шрифты для шрифтовых, результат канваса и парсинг шрифтов - штуки вообще разные и совмещать их можно, например, еще можно на трактор шарики прицепить и ездить. Можно? Можно. Нужно? Нет.

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

[sigma77]

Конечно. канвас не предназначен для просто вывода текстов. Но это не отменяет того, что канвас может содержать текст, в том числе и не стандартный. А вот то что не стандартные шрифты работают в канвасе через одно место, факт.

п.с. А откуда в обсуждении взялся вектор, что-то я не до конца поняла...

п.п.с. Кстати куфон выводит текст, если не ошибаюсь, канвасом.