Оглядываясь на stackoverflow и google, вы можете решить эту проблему, но havent очень повезло с решением.
Случается, что шрифт шрифта не загружается в нужное время. У меня есть html5 canvas и javascript, где я рисую несколько простых кругов с заполняющим текстом внутри них. Теперь круги рисуются, но сам текст является неправильным шрифтом.
Я предполагаю, что причина заключается в том, что шрифт загружается последним, и он просто выбирает шрифт по умолчанию.
Теперь мой вопрос … есть способ, которым я могу отложить объекты холста, нарисованные до загрузки шрифта? Таким образом, шрифт будет готов к использованию, и он назначит правильные шрифты для объектов холста.
Я должен указать, что у меня есть файл index.php, который включает в себя мой другой файл php, где фактически рисуется javascript и холст.
Используйте этот трюк и привяжите событие onerror к элементу Image .
Демо здесь: http://jsfiddle.net/g6LyK/ – работает с последним Chrome.
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'; document.getElementsByTagName('head')[0].appendChild(link); // Trick from https://stackoverflow.com/questions/2635814/ var image = new Image; image.src = link.href; image.onerror = function() { ctx.font = '50px "Vast Shadow"'; ctx.textBaseline = 'top'; ctx.fillText('Hello!', 20, 10); };
В соответствии с ответом на этот вопрос вам может потребоваться прослушать событие onreadystatechange , проверив, будет ли document.readystate === 'complete'.