当我在具有通过@ font-face加载的字体的画布中绘制文本时，该文本无法正确显示。它根本不显示（在Chrome 13和Firefox 5中），或者字体错误（Opera 11）。此类意外行为仅在带有字体的第一个图形上发生。之后，一切正常。这是标准行为还是什么？谢谢。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>
3 回答
- 3 回答
- 0 关注
- 924 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消