如何等待第一次画布重绘直到@ font-face-font加载？ [英] How do I wait for first canvas-repaint until @font-face-font is loaded?

问题描述

我有一个HTML5画布，用 context.fillText（...）; 使用@ font-face字体写入文本。

使用Firefox显示页面（3.6）我有问题，在画布的第一个画布上，字体尚未下载，所以文本将以标准字体显示。

我发现一个'solution'这里，但它不工作，因为字体只是在画布中使用，并且使用jQuery加载和显示ajax。

是否有比尝试使用超时更好的解决方案 setTimeout（repaintCanvas，500）; ？

I have a HTML5-canvas and write text with context.fillText(...); using a @font-face-font.
Displaying the page with Firefox (3.6) I have the problem, that on the first paint of the canvas the font is not downloaded yet so the text will be displayed with a standard-font.
I found a 'solution' here but it does not work, because the font is only used in the canvas and the canvas is loaded and displayed with ajax using jQuery.
Is there any better solution than trying to use a timeout setTimeout(repaintCanvas, 500);?

推荐答案

我想我在Reigel的答案找到一个解决方案：

I think I found a solution with the help of Reigel's answer:

$.get('font/url.ttf', function() {
    // do canvas codes.... cause font is loaded...
});

另外通过 font-family：'fontfacename'; 为canvas的父元素。

可能是字体加载了两次，不知道。但没有第二个负载，它不会显示正确。

Additionally use the font via font-family: 'fontfacename'; for the canvas' parent-element.
Could be that the font is loaded twice, don't know. But without the second load it won't be displayed right.

这篇关于如何等待第一次画布重绘直到@ font-face-font加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！