1

私はこれに数日間取り組んできましたが、役に立たなかったのですが、それは簡単なことのようです.

キャンバスを初めて描画したときに、Google フォントを正しく表示できません。フォントのその後の表示はOKです。確かにフォントをロードするタイミングが関係しているようです。

@font-face を使用してテキストを <canvas> に描画する にリストされている提案された修正のほとんどを試しましたが、最初は機能しませんでしたが、失敗しました。

上記のリンクからの修正のほとんどを組み込んだ私の 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!

4

2 に答える 2

0

私はあきらめて、ページの最初のロードで、実際のテキストの代わりに font-face フォントを使用したテキストの画像を使用し、font-face フォントを使用した実際のテキストをキャンバス。

キャンバス上のフォントのその後の使用はすべて正しく表示されました。

私の回避策コードは私の Web サイトに組み込まれていますが、必要に応じて作業モデルの jsfiddle を喜んで作成します。

于 2013-05-06T19:33:41.373 に答える
0

JS Fiddle に移動し、onLoad ではなく onDomready を待機させると、キャンバスは最初から正しく表示されます。

于 2013-11-08T18:43:46.687 に答える