将文本绘制到 <canvas>with @font-face 第一次不起作用 [英] Drawing text to <canvas> with @font-face does not work at the first time
问题描述
当我使用通过@font-face 加载的字体在画布中绘制文本时，文本无法正确显示.它根本不显示(在 Chrome 13 和 Firefox 5 中)，或者字体错误(Opera 11).这种类型的意外行为仅发生在第一次使用该字体的绘图中.之后一切正常.
When I draw a text in a canvas with a typeface that is loaded via @font-face, the text doesn't show correctly. It doesn't show at all (in Chrome 13 and Firefox 5), or the typeface is wrong (Opera 11). This type of unexpected behavior occurs only at the first drawing with the typeface. After then everything works fine.
这是标准行为还是什么?
Is it the standard behavior or something?
谢谢.
PS:下面是测试用例的源码
PS: Following is the source code of the test case
<!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>
推荐答案
在调用 fillText 方法时，必须在画布上绘图并立即返回.但是浏览器还没有从网络加载字体，这是一个后台任务.所以它必须回退到它确实可用的字体.
Drawing on canvas has to happen and return immediately when you call the fillText method. However, the browser has not yet loaded the font from the network, which is a background task. So it has to fall back to the font it does have available.
如果您想确保字体可用，请在页面上预先加载一些其他元素，例如:
If you want to make sure the font is available, have some other element on the page preload it, eg.:
<div style="font-family: PressStart;">.</div>
这篇关于将文本绘制到 <canvas>with @font-face 第一次不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
