Как подружить Fabric.js с русским текстом и заставить правильно показывать fontFamily?

Question

[Андрей Годин]

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

У меня две проблемы при работе с текстом. И обе связаны с fontFamily
1. Если я генерирую текст сразу по клику на кнопку, то все нормально. Если же я сохранил несколько текстов, а потом их загружаю, то они выводятся каким-то стандартным шрифтом. Любой клик по холсту меняет шрифт на тот, что нужен.
canvas.add(text);
canvas.setActiveObject(text);
canvas.renderAll();
canvas.calcOffset();
Все это используется.

Вторая проблема - это русский язык. На нем не меняется font family. Если написать "new Васюки" в одном тексте, то new поменяет шрифт, а Васюки выведется стандартным шрифтом.

Answer 1

[fairwind]

Скорее всего, текст отрисовывается раньше, чем загружается шрифт.
Если так, можно, как вариант, заранее подгружать шрифты.
Например, с помощью github.com/typekit/webfontloader.
Насчет русского языка - а шрифт вообще кириллический?

Comments

[Андрей Годин]

Я брал шрифты с другого сайта, где используется fabric.js. Там все нормально.
За идею с загрузкой шрифтов спасибо. Проверю. Надо попробовать просто небольшую задержку сделать. Только вот не понимаю откуда и куда грузятся шрифты. я думал они все уже содержатся в браузере. Я использую только css свойство font-family и соответственно fontFamily в fabric.js

Answer 2

[Андрей Годин]

Насчет шрифтов интересно. Надо проверить. Но ведь используется просто текстовое значение fontFamily. Откуда грузятся шрифты?

Еще заметил, что, если сначала отрисовать графический объект, потом текст, то шрифт отображается нормально. Но не в случае с русским языком.