相关疑难解决方法(0)

使用@ font-face将文本绘制到<canvas>在第一次时不起作用

当我在带有通过@ 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 …
Run Code Online (Sandbox Code Playgroud)

html5 canvas font-face

85
推荐指数
6
解决办法
7万
查看次数

标签 统计

canvas ×1

font-face ×1

html5 ×1