如何在HTML5画布元素中使用自定义字体？

我看过Cufon和typeface.js之类的东西，但它们似乎是SIFR的替代品，不允许您设置自由形式坐标并将自定义类型绘制到

---

有人有什么想法吗？

我在JSFIDLE上做了一个简单的演示，展示了如何使用@font-face实现这一点：

Opera还有一个关于使用

的功能，包括文本API

CSS:

Javascript:

var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = '68px KulminoituvaRegular';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('Keyboard Cat', 0, 270);
};

---

我刚才在这里回答了这个问题：

关键部分：

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

---

不管您是否使用KineticJS，没有KineticJS的唯一区别是您可能直接使用HTML创建Canvas元素，而不是使用div层作为容器。毕竟KineticJS只是在该容器中创建了一个普通的画布元素。

请注意这个问题：Firefox的问题是因为浏览器对其同源策略非常严格。星星必须对齐，图像、字体和网页必须位于同一个域。这在Chrome 21中不起作用，但在FF 7、12和15中起作用。全部在Windows 7上。这在BlackBerry Playbook浏览器上无法（可靠地）工作。充其量它在刷新页面时工作；有时候字体根本不显示。我无法让JSFIDLE正常工作，所以我用谷歌Webfont更新了它。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生变化，只有链接的答案可能会无效。在这种情况下，我会说这没问题，因为它链接到stackoverflow；）-但我将包括基本部分。

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}