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等)引用改字體!! !這就是最大的坑了!!!