大佬教程收集整理的这篇文章主要介绍了html5 – 用@ font-face绘制文本到第一次不工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
它是标准的行为还是什么？
谢谢。
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>
以上是大佬教程为你收集整理的html5 – 用@ font-face绘制文本到第一次不工作全部内容，希望文章能够帮你解决html5 – 用@ font-face绘制文本到第一次不工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。