Рисование текста к <холсту> с @font-face не работает в первый раз

Question

Рисование текста к <холсту> с @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>

85

canvas html5 font-face

задан Ernest 10 November 2012 в 12:48

2 ответа

Другие вопросы по тегам:

canvas html5 font-face

Похожие вопросы:

score 3 · Answer 1

Недавно я столкнулся с этой проблемой, когда играл с ней. http://people.opera.com/patrickl/experiments/canvas/scroller/

решил эту проблему, добавив семейство шрифтов на холст прямо в CSS, так что вы можете просто добавить

холст {font-family: PressStart; }

score 64 · Answer 2

Рисование на холсте должно происходить и возвращаться немедленно при вызове метода fillText. Однако браузер еще не загрузил шрифт из сети, что является фоновой задачей. Поэтому он вынужден вернуться к шрифту, который имеет в наличии.

Если вы хотите убедиться, что шрифт доступен, пусть какой-нибудь другой элемент на странице предварительно загрузит его, например:

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