जब मैं कैनवास में एक टेक्स्ट टाइप करता हूं जिसमें एक टाइपफेस होता है जो @ फॉन्ट-फेस के जरिए लोड होता है, टेक्स्ट सही से नहीं दिखता है। यह बिल्कुल नहीं दिखाता (क्रोम 13 और फ़ायरफ़ॉक्स 5 में), या टाइपफेस गलत है (ओपेरा 11)। इस प्रकार का अप्रत्याशित व्यवहार केवल टाइपफेस के साथ पहली ड्राइंग में होता है। इसके बाद सबकुछ ठीक हो जाता है।
यह मानक व्यवहार है या कुछ और?
धन्यवाद।
पुनश्च: निम्नलिखित परीक्षण मामले का स्रोत कोड है
<!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>