SORU
3 Mayıs 2010, PAZARTESİ

&Lt için metin;tuval> çizim; @font-face çalışmıyor ilk kez birlikte

@Aracılığıyla yüklenen bir yazı ile bir tuval bir metin yazı tipi-yüz çizerken, metin doğru göstermiyor. Hiç görünmüyor (ve Firefox 5 Krom 13), ya da bişeyi yanlış (Opera 11). Beklenmeyen bir davranış bu tip yazı karakteri ile ilk çizim sadece oluşur. Sonra her şey gayet iyi çalışıyor.

Standart davranış ya da bir şey mi?

Teşekkür ederim.

PS: Aşağıdaki kaynak test çalışması kod

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>@font-face and <canvas></title>
        <style id="css">
@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/PressStart2P.ttf');
}
        </style>
        <style>
canvas, pre {
    border: 1px solid black;
    padding: 0 1em;
}
        </style>
    </head>
    <body>
        <h1>@font-face and <canvas></h1>
        <p>
            Description: click the button several times, and you will see the problem.
            The first line won't show at all, or with a wrong typeface even if it does.
            <strong>If you have visited this page before, you may have to refresh (or reload) it.</strong>
        </p>
        <p>
            <button id="draw">#draw</button>
        </p>
        <p>
            <canvas width="250" height="250">
                Your browser does not support the CANVAS element.
                Try the latest Firefox, Google Chrome, Safari or Opera.
            </canvas>
        </p>
        <h2>@font-face</h2>
        <pre id="view-css"></pre>
        <h2>Script</h2>
        <pre id="view-script"></pre>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script id="script">
var x = 30,
    y = 10;

$('#draw').click(function () {
    var canvas = $('canvas')[0],
        ctx = canvas.getContext('2d');
    ctx.font = '12px "Press Start 2P"';
    ctx.fillStyle = '#000';
    ctx.fillText('Hello, world!', x, y  = 20);
    ctx.fillRect(x - 20, y - 10, 10, 10);
});
        </script>
        <script>
$('#view-css').text($('#css').text());
$('#view-script').text($('#script').text());
        </script>
    </body>
</html>

CEVAP
3 Mayıs 2010, PAZARTESİ

Tuval üzerine çizim oldu ve hemen fillText yöntemi diyorsun dönmesi gerekiyor. Ancak tarayıcı henüz bir arka plan görevi olan şebeke, yazı tipi yüklü değil. Yazı tipi geri düşmek gerekiyoryokmevcut.

Eğer yazı tipi kullanılabilir olduğundan emin olun, sayfa üzerinde başka bir öğe önceden sahip olmak istiyorsanız, örn.:

<div style="font-family: PressStart;">.</div>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Html5Font-Face TuvalCanvas

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • lifeisforsharingDT

    lifeisforsha

    18 Mayıs 2011
  • steeletraining

    steeletraini

    28 NİSAN 2010
  • The Pet Collective

    The Pet Coll

    5 Ocak 2012

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR