Question

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

我把它归结为以下测试用例：

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。

另一个奇怪的方面是Google字体会在大约20个案例中显示，但当我将testFont函数包含在setTimeout内时，延迟时间为1000 ms行为反转并不时显示fonts.com字体。

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

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

Answer 1

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

.wf-loading{
    display: none;
}

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

使用TypeKit的WebFontLoader for Canvas文本

1 个答案: