4

我在一个项目中使用来自http://icomoon.io/的字体，需要将其绘制到带有fillText.

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

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

我能做些什么来调试这个问题？

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

4

3 回答 3

4

试试这个

@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);
于 2013-01-09T11:38:28.910 回答
1

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

url('../fonts/icomoon.svg#icomoon') 格式('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;

}

于 2013-08-31T00:36:50.230 回答
0

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

 context.font = '20px icomoon';
 context.fillText('\u0xe00e', 20, 20);
于 2017-05-25T05:36:32.007 回答