将文字绘制为< 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）。这种类型的意外行为仅发生在带有字体的第一个绘图。
谢谢你。
这是一种标准的行为吗？ >
PS：以下是测试用例的源代码
< DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> @ font-face和& lt; canvas& gt;< / title&
< style id =css>
@ font-face {
font-family：'按开始2P';
src：url（'fonts / PressStart2P.ttf'）;
}
< / style>
< style>
canvas，pre {
border：1px solid black;
padding：0 1em;
}
< / style>
< / head>
< body>
< h1> @ font-face和& lt; canvas& gt;< / h1>
< p>
描述：点击按钮几次，你会看到问题。
第一行不会显示，或者使用错误的字体，即使它是。
< strong>如果您之前访问过此网页，您可能需要刷新（或重新加载）。< / strong>
< / p>
< p>
< button id =draw>＃draw< / button>
< / p>
< p>
< canvas width =250height =250>
您的浏览器并不支援CANVAS元素。
尝试使用最新的Firefox，Google Chrome，Safari或Opera。
< / canvas>
< / p>
< h2> @ font-face< / h2>
< pre id =view-css>< / pre>
< h2>脚本< / 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按开始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 方法。但是，浏览器尚未从网络加载字体，这是一个后台任务。
如果您要确保字体可用，请使用其他字体元素在页面上预加载它，例如：
< div style =font-family：PressStart;> ;. < / div>
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?
Thank you.
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>
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屋！
