719 Главной фишкой замечательного инструмента Font.js является то, что вы сможете на JavaScript создавать различные объекты шрифтов, как будто вы работаете с графикой. Похожей идеальной техникой загрузки обладает проект pdf.js.
Далее идет пример кода запуска такого объекта шрифта.
Пример кода
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var font = new Font(); font.onload = function() { // measure some text console.log(font.measureText("some text", 14)); // style an element document.querySelector("p").style.fontFamily = "'" + font.fontFamily + "'"; } font.onerror = function(e) { alert(e); } // kick off the actual loading font.fontFamily = "My Font"; font.src = "acmesa.ttf"; |
Ощущения такие, как у себя дома. Такой простой API получился.
Работает он следующим образом. Сначала подгружается шрифт с помощью Ajax запроса, далее идет разбор некоторых метаданных, чтобы определить валидность шрифта и вытащить из него определенные метрики. Затем на страницу вставляется свойство @font-face и тестовый DIV. Идет опрос ширины этого элемента, как только ширина перестает быть нулем, это означает загрузку шрифта браузером и его готовность использования. В конце вызывается обработчик OnLoad.
Видите, как много работы вы избежали? :)
