html5 – 用@ font-face绘制文本到第一次不工作

当我在带有通过@ font-face加载的字样的画布中绘制文本时，文本无法正确显示。它根本不显示(在Chrome 13和Firefox 5)，或字体错误(Opera 11)。这种类型的意外行为仅发生在带有字体的第一个绘图。之后一切工作正常。

它是标准的行为还是什么？

谢谢。

PS：以下是测试用例的源代码

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <title>@font-face and &lt;canvas&gt;</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 &lt;canvas&gt;</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方法时立即返回。但是，浏览器尚未从网络加载字体，这是一个后台任务。所以它必须回到它有可用的字体。

如果要确保字体可用，请在页面上预加载一些其他元素，例如：

<div style="font-family: Pressstart;">.</div>

原文地址：https://www.jb51.cc/html5/170096.html

html5 – 用@ font-face绘制文本到第一次不工作

解决方法

相关推荐