當我在具有通過@ font-face加載的字體的畫布中繪制文本時，該文本無法正確顯示。它根本不顯示（在Chrome 13和Firefox 5中），或者字體錯誤（Opera 11）。此類意外行為僅在帶有字體的第一個圖形上發(fā)生。之后，一切正常。這是標準行為還是什么？謝謝。PS：以下是測試用例的源代碼<!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>
添加回答
舉報
0/150
提交
取消