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

我已经看过像Cufon和typeface.js的东西，但它们似乎是SIFR的替代品，不允许你设置自由格式的坐标，并将自定义types绘制到<canvas>

任何人有任何想法？

Answer 1

我已经在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 = '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); }; 

Answer 2

我刚刚在这里回答了这个问题： 预加载字体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; } 

不pipe你是否使用KineticJS，没有KineticJS的唯一区别是你可能直接用HTML创buildCanvas元素，而不是使用div层作为容器。 毕竟KineticJS只是在该容器中创build一个正常的Canvas元素。