如何在画布元素上呈现图标字体字形？

Question

我正在项目中使用来自http://icomoon.io/的字体，需要使用fillText将其绘制到画布元素上。

var charCode = 0xe00e;
context.font = "20px icomoon";
context.fillText(String.fromCharCode(charCode));

字体已经被包含在CSS中（并且也被本地安装），但是我想看到的房子图片转而显示为“2”。

我该如何调试这个问题？

更明确地说，我正在尝试通过字符代码呈现特定字形，而不是直接的字符串。

- Michael Forrest

Answer 1

尝试 这个。

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

var ctx = document.getElementById('c').getContext('2d');
ctx.font = '36px KulminoituvaRegular';
ctx.textBaseline = 'top';
ctx.fillStyle = 'black';
ctx.fillText  ('Kulminoituva Regular', 10, 10);

- Cerbrus

---

这是一个使用@font-face和canvas的有用演示，但我的真正问题是我无法通过Unicode字符呈现字形（甚至不能确定canvas元素认为它正在使用哪种字体！） - Michael Forrest

@MichaelForrest: 我明白了。你确定你有正确的字符编码吗？你能否发布一下画布上显示的屏幕截图，并告诉我你从哪里获取字符编码？（**这个例子** 看起来工作正常，所以我怀疑CharCode是错误的。 - Cerbrus

嗯，当我将你的fiddle更改为使用（我本地安装的）icomoon字体时，它可以工作... - Michael Forrest

但是它在我的应用程序中不起作用。我需要找出如何查看画布元素认为它可以使用哪种字体... - Michael Forrest

嗯，祝你好运找到问题所在！同时，你能否考虑接受我的答案呢？因为它可能是我们能得到的最接近的答案了。:3 - Cerbrus

好的，看起来我有一个奇怪的损坏字体，被别名为icomoon。我会接受你的答案，以帮助那些没有我这么奇怪问题的人 ;) - Michael Forrest

Answer 2

一种解决方法是使用icomoon提供的SVG字体。代码看起来像这样：

url('../fonts/icomoon.svg#icomoon') format('svg')

我认为画布需要这个SVG数据来渲染图标，如果你使用其他各种字体格式（eot、woff、ttf），画布不知道如何解释Unicode转换。好消息是SVG在所有支持HTML画布的浏览器中都受到支持。更新：要澄清的是，您的字体嵌入应该在所有其他src行之后有SVG行，就像这样：

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

}

- unpollo

Answer 3

尝试在所需的字符代码前插入 \u，例如如果字符代码为 '0xe00e'，则使用 '\u0xe00e'

 context.font = '20px icomoon';
 context.fillText('\u0xe00e', 20, 20);

- Gaurav