使用CSS3的@font-face嵌入字体后，怎样在HTML5中的CANVAS调用

 
    @font-face {
      font-family: "Automania";
      src: url("Automania.ttf");
    }


function draw() {    
    var ctx = document.getElementById('shuipai').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 = 'http://dotnet.aspx.cc/Images/logoSite.gif';      
  }


 

经过测试需要在页面某处调用后，canvas调用才会有效。即页面上某处字体为该字体，然后canvas才能加载到这个字体。原因可能是canvas本质还是图片的属性，而浏览器假如加载dom元素假如未使用到某个自定义字体，为了加快页面加载速度，默认忽视了该字体的加载，导致canvas内部调用不到。