html5 - 请问利用font-face定义的字体怎么在canvas里应用？

Question

请问利用font-face定义的字体怎么在canvas里应用？

Answer 1

<style>
    @font-face {
      font-family: "_________";  //下划线填字体名称
      src: url("_________");  //下划线填字体文件
    }
</style>

<script type="text/javascript">
    function draw() {    
        var ctx = document.getElementById('canvas').getContext('2d');    
        var img = new Image();    
        img.onload = function(){         
          ctx.drawImage(img,0,0);    
          ctx.beginPath();    
          ctx.fillStyle    = '#000';
          ctx.font         = "60px Automania";
          ctx.textBaseline = 'top';
          ctx.fillText('what this font looks', 0, 5);
          ctx.stroke();
        }
        img.src = 'img.png';      
      }
</script>

<input onclick="draw()" type="button" value="test" />
<canvas id="canvas" width="800" height="800"></canvas>

不过不建议在canvas中使用自定义字体，因为字体文件加载太慢。。

Answer 2

1.必须再等到字体下载完成之后再去渲染canvas,字体才能有作用
2.canvas中所引用的字体必须在文档流中有标签(span,p等)引用改字体!!!这就是最大的坑了!!!