Question

我一直在努力争取这几天无济于事但看起来应该是一件简单的事情。

第一次绘制画布时，我无法正确显示Google字体。随后显示字体即可。它当然似乎与加载字体的时间有关。

我已尝试在Drawing text to <canvas> with @font-face does not work at the first time上列出的大多数建议修补程序，但未成功。

以下是我的jsfiddle，其中包含上述链接中的大部分修复内容： http://jsfiddle.net/HatHead/GcxQ9/23/

当你加载jsfiddle时，你会看到画布标题和文本是默认字体。按“运行”按钮时，字体将更新为js代码指定的字体。

以下是上述jsfiddle的代码：

HTML：

<!-- you need to empty your browser cache and do a hard reload EVERYTIME to test this otherwise it will appear to working when, in fact, it isn't -->

<h1>Title Font</h1>

<p>Paragraph font...</p>
<canvas id="myCanvas" width="740" height="400"></canvas>

CSS：

@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);
 @import url(http://fonts.googleapis.com/css?family=Rock+Salt);
 canvas {
    font-family:'Rock Salt', 'Architects Daughter'
}
.wf-loading p {
    font-family: serif
}
.wf-inactive p {
    font-family: serif
}
.wf-active p {
    font-family:'Architects Daughter', serif;
    font-size: 24px;
    font-weight: bold;
}
.wf-loading h1 {
    font-family: serif;
    font-weight: 400;
    font-size: 42px
}
.wf-inactive h1 {
    font-family: serif;
    font-weight: 400;
    font-size: 42px
}
.wf-active h1 {
    font-family:'Rock Salt', serif;
    font-weight: 400;
    font-size: 42px;
}

JS：

// do the Google Font Loader stuff....
WebFontConfig = {
    google: {
        families: ['Architects Daughter', 'Rock Salt']
    }
};
(function () {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

//play with the milliseconds delay to find the threshold - don't forget to empty your browser cache and do a hard reload!
setTimeout(WriteCanvasText, 0);

function WriteCanvasText() {
    // write some text to the canvas
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.font = "normal" + " " + "normal" + " " + "bold" + " " + "42px" + " " + "Rock Salt";
    context.fillStyle = "#d50";
    context.fillText("Canvas Title", 5, 100);
    context.font = "normal" + " " + "normal" + " " + "bold" + " " + "24px" + " " + "Architects Daughter";
    context.fillText("Here is some text on the canvas...", 5, 180);
}

它使用延迟，但这是一个糟糕的解决方案。

有什么想法可以解决这个问题吗？以前有人打过它吗？我不愿意放弃并放入图像来代替第一次加载的文本。

非常感谢stackoverflow'ers！

Answer 1

我放弃了，并且，对于页面的第一次加载，我使用带有font-face字体的文本图像代替实际文本，同时在显示外部使用font-face字体定位实际文本画布区域。

画布上所有后续使用的字体都显示正确。

我的解决方法代码已融入我的网站，但是如果有人需要，我很乐意创建一个工作模型的jsfiddle。

Answer 2

如果你转到你的JS小提琴并让它等待onDomready而不是onLoad，画布似乎第一次就把它弄好了。

Google字体不会在第一次显示在画布上

2 个答案: