Question

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

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

字体被包含在CSS中（并且也在本地安装）但是我想要看到的房子的图片不是，它呈现'2'。

如何调试此问题？

更清楚一点：我正在尝试通过字符代码而不是简单的字符串来呈现特定的字形。

Answer 1

尝试 this

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

Answer 2

一个解决方法是使用ico moon提供的SVG字体。这就是看起来像这样的界限：

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

我相信画布需要SVG数据来渲染图标，如果你使用其他各种字体格式之一（eot，woff，ttf），画布不知道如何解释unicode转换。

好消息是，所有与html画布相同的浏览器都支持svg。

更新：为了澄清，您的字体嵌入应该在所有其他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;

}

Answer 3

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

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

如何在画布元素上渲染图标字体字形？

3 个答案: