blocks|key|1066755|text|我在jsfiddle上拼凑了一个简单的演示，展示了如何使用@font-face：http://jsfiddle.net/zMKge/来做到这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1066756|Opera也有一个关于使用<canvas>的simple+tutorial，包括text+API。|style|CODE|1066757|CSS：|1066758|@font-face+{
++++font-family:+'KulminoituvaRegular';
++++src:+url('http://www.miketaylr.com/f/kulminoituva.ttf');
}|code-block|syntax|javascript|1066759|Javascript：|1066760|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);
};|1066761|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zMKge/|1|https://dev.opera.com/articles/html5-canvas-basics/^0|14|Q|0|0|D|8|M|F|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1D|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1F|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

I've thrown together a simple demo on jsfiddle here showing how to do this with @font-face: <a href="http://jsfiddle.net/zMKge/" rel="noreferrer">http://jsfiddle.net/zMKge/</a>

Opera also has a <a href="https://dev.opera.com/articles/html5-canvas-basics/" rel="noreferrer">simple tutorial</a> on using <code>&lt;canvas&gt;</code>, including the text API.

CSS:

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

Javascript:

<pre><code>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);
};
</code></pre>

blocks|key|1281533|text|我刚刚在这里回答了这个问题：Preload+font+HTML5,+JS,+Kinetic.js?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1281534|最重要的部分：|1281535|@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;
}|code-block|syntax|javascript|1281536|不管你是否使用KineticJS，唯一的区别就是你可能会直接用KineticJS创建画布元素，而不是使用div层作为容器。毕竟，KineticJS只是在该容器中创建了一个普通的画布元素。|1281537|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/15540591/preload-font-html5-js-kinetic-js/15973926#15973926^0|E|Z|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I have just answered this question here: <a href="https://stackoverflow.com/questions/15540591/preload-font-html5-js-kinetic-js/15973926#15973926">Preload font HTML5, JS, Kinetic.js?</a>

The essential part:

<pre><code>@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;
}
</code></pre>

It should not matter if you are using KineticJS or not, the only difference without KineticJS is that you would possibly create the Canvas element directly with HTML instead of using a div layer as container. After all KineticJS just creates a normal Canvas element in that container.

I've looked at things like Cufon and typeface.js but they seem to be SIFR alternatives and don't allow you to set freeform coordinates and draw custom type onto a <code>&lt;canvas&gt;</code>

Anyone got any ideas?

How can I use custom fonts in an HTML5 Canvas element?

容器

我看过像Cufon和typeface.js这样的东西，但它们似乎是SIFR的替代品，不允许您在<canvas>上设置自由格式坐标和绘制自定义类型有人有什么想法吗？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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