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

  • chrmoe

    chrmoe

    7 Kasım 2006
  • The Onion

    The Onion

    14 Mart 2006
  • William Sledd

    William Sled

    24 EYLÜL 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR