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

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

任何人有任何想法吗？

— 杰迪
source

Answers:

我在jsfiddle上放了一个简单的演示，这里展示了如何使用@ font-face做到这一点：http : //jsfiddle.net/zMKge/

Opera还提供了有关使用的简单教程<canvas>，包括文本API。

CSS：

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}

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);
};

— 迈克泰勒
source

要知道这个问题，但：stackoverflow.com/questions/2756575/...

— Alsciende

Firefox的问题是因为浏览器对其同源策略非常严格。星星必须对齐，并且图像，字体和网页必须全部位于同一域中

— 克里斯·博斯科

这不适用于Chrome 21，但适用于FF 7、12和15。所有功能都适用于Windows7。–

— Charlotte Charlotte

在BlackBerry Playbook浏览器上，这（可靠地）不起作用。最好是刷新页面时有效；有时字体根本不显示。

— Ted Hopp

我无法使JSFiddle正常工作，所以我使用Google Webfont更新了它。 jsfiddle.net/zMKge/2171

— Francisc0

我刚刚在这里回答了这个问题：预加载HTML5，JS，Kinetic.js字体？

重要部分：

@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只是在那个容器中创建了一个普通的Canvas元素。

— 卢施恩
source

尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会无效。

— Josh Burgess 2015年

在那种情况下，我会说没关系，因为它链接到stackoverflow;）-但我将包括必要的部分。

— luschn 2015年