javascript - 无法让 Dejavu Serif Bold 用作 HTML Canvas 的字体，这是什么原因？

Question

所以我有一个 jsFiddle，其中包含一个画布，上面绘制了一个屏幕截图/图像，显示我的文本使用正确的字体（Dejavu Serif Bold）显示在字体管理器中并正确显示。然后我尝试使用@font-face 和 html 画布在屏幕截图中的文本上方使用相同的字体绘制相同的文本，但它看起来不一样（你最好从月亮和里面有一个点的圆圈分辨出来）， 怎么来的？

jsFiddle：http: //jsfiddle.net/gautamadude/zMKge/1544/

CSS

@font-face {
    font-family: 'Dejavu Serif Bold';
    src: url('http://labrador.is/media/media/DejaVuSerif-Bold.ttf');
}

Javascript

var ctx = document.getElementById('c').getContext('2d');
var dejavu_look = new Image();
dejavu_look.src = "http://labrador.is/media/media/dejavu_visual.png";
dejavu_look.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = 'bold 50px "Dejavu Serif Bold"';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('♇♆♄♃♂☉♀☿☽⨁', 220, 320);
};