谷歌字体第一次不会显示在画布上答案

【问题标题】：Google fonts won't display on canvas first time谷歌字体第一次不会显示在画布上
【发布时间】：2013-05-06 01:54:28
【问题描述】：

我已经为此挣扎了几天无济于事，但似乎这应该是一件简单的事情。

我无法在第一次绘制画布时正确显示 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！

【问题讨论】：

答案：stackoverflow.com/questions/2756575/…
感谢 Chemiv，但不幸的是，正如我在问题中指出的那样，以及在仔细阅读实际线程本身时，该线程中的建议修复都没有解决问题。我的问题包含了建议的修复，但是，它们并没有解决问题。如果对社区有用，我会把上面的代码贴在那里作为演示。

标签： javascript canvas

【解决方案1】：

我放弃了，在第一次加载页面时，我使用带有 font-face 字体的文本图像代替实际文本，同时将带有 font-face 字体的实际文本放置在显示器之外画布的区域。

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

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

【讨论】：

【解决方案2】：

如果您使用 JS Fiddle 并让它等待 onDomready 而不是 onLoad，那么画布似乎第一次就正确了。

【讨论】：