0

我很难使用通过TypeKit webfontloader加载的字体作为在画布元素上绘制的文本的字体。

我将其归结为以下测试用例：

WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    },
    monotype: {
        projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' //this is valid & working
    },
    fontactive : function(font, fvd){
        testFont(font, fvd, 'active');
    },
    fontinactive : function(font, fvd){
        testFont(font, fvd, 'inactive');
    }
});

function testFont(font, fvd, state){

    console.log('loaded ' + state, font, fvd);

    var $canvas = $('<canvas>').attr({width: 400, height: 100}).appendTo($('body'));
    var canvas = $canvas[0];
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'black';
    ctx.font = '30px ' + font;
    ctx.fillText('CANVAS PARTY YALL!', 50, 50);

}

每种字体的回调都会触发，但画布文本中并未使用该字体。一个奇怪的方面是从 fonts.com 加载的字体（monotype）部分确实将自己声明为fontinactive，但我可以毫无问题地将它们应用于所有 HTML。Google 字体总是会触发fontactive.

另一个奇怪的方面是谷歌字体将在大约 20 种情况下显示，但是当我将我的testFont函数包装在 asetTimeout中并延迟1000ms 时，这种行为会反转并不时显示 fonts.com 字体。

所有这一切让我得出结论，处理程序可能触发得太早，但我不知道该怎么做（而不是像超时和祈祷这样的骇人听闻的东西）。知道我做错了什么或者我能做些什么来解决这个问题吗？

编辑：为了增加混乱，我刚刚注意到 fonts.com 字体实际上在 IE9 中运行良好。所有其他浏览器似乎都在做我上面描述的事情。

4

1 回答 1

0

.wf-loading好的，所以我确实发现当我不通过样式表隐藏元素时一切正常，所以我不使用：

.wf-loading{
    display: none;
}

不再使用屏幕偏移来隐藏未渲染的元素。

于 2013-06-18T13:52:37.113 回答