2

*.ttfKinetic.js を使用して HTML キャンバスにテキストを書き込むために使用しているカスタム フォント ( ) があります。

残念ながら、ページの最初の読み込みでは、カスタム フォントが使用されていません。ページを再読み込みすると、すべて問題ありません。

どういうわけかフォントをプリロードできますか?

私はこれを試しましたが、まだ機能していません:

<link rel="prefetch" href="resource/font/IDAutomationHC39M.ttf">

Kinetic.js にプリロードするように指示できますか?

フォントは私の CSS で次のように定義されています。

@font-face {
    font-family: "Barcode";
    src: url(../font/IDAutomationHC39M.ttf);
}

ご支援いただきありがとうございます。

4

6 に答える 6

10

今日も同じ問題がありました..これを使用してしまいました

<style>
@font-face {
    font-family: 'ArchivoBlack-Regular';
    src: url('../fonts/ArchivoBlack-Regular.ttf');
}
</style>

<div style="font-family:'ArchivoBlack-Regular'">&nbsp;</div>

その後、通常の KineticJS を行うことができます..! 実際には、使用する前に最初にフォントをロードする必要があります..! 私は英語が得意ではありませんが、あなたが私の主張を理解してくれることを願っています。そのリンクも見てください：Github Link

于 2013-05-03T18:32:47.080 に答える
3

この古い css ハックを使用して、フォントを強制的に使用可能にすることができます。

バーコード フォントを指定する隠し要素をページに追加する

<span id="mustLoadMe">

そしてCSSで：

#mustLoadMe
{
    visibility: hidden;
    position: absolute;
    font-family: Barcode, Arial, Sans-serif;
}

最後に、キャンバスにテキストを描画する前に、jQuery を使用してフォントが読み込まれるのを待ちます。

$("#mustLoadMe").load(function() {
       // do your canvas stuff here because the font should be loaded now...
});

注: 上記のステップ 3 で $(window).load() に頼る必要がある場合があります。これは、特定のブラウザーでのフォントの非同期読み込みを考慮するためです。

于 2013-03-21T21:32:22.800 に答える