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

Question

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

htmlcanvasfontscufontypeface.js

88

我看过了 Cufon 和 Typeface.js，但它们似乎是 SIFR 的替代品，不允许您设置自由形式的坐标并在 <canvas> 上绘制自定义字体。

有没有人有什么想法？

- jdee

4个回答

7

我刚刚在这里回答了这个问题：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元素。

- andyrandy

1

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - Josh Burgess

2

在这种情况下，我会说没问题，因为它链接到stackoverflow ;) - 但我会包含必要的部分。 - andyrandy

2

来自三年后的答案lol

你可以使用JavaScript的new FontFace(family, font, descriptor)

https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace

其中family是字体名称，font是url或ttf二进制数据，descriptor是CSS元素。

然后使用ctx.fillText()创建文本。

- just_a_kid_coder_123

0

在我的情况下，这个方法有效。

在标签内定义带有预加载的链接，并在

- greentec

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- miketaylr · Accepted Answer

我在这里使用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);
};