如何在畫布元素上呈現圖標字體字形？

Question

我在項目上使用了http://icomoon.io/中的字體，並且需要使用fillText將其繪制到畫布元素上。

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

該字體已包含在CSS中（並且也已在本地安裝），但它呈現的是“ 2”，而不是我想要看到的房屋圖片。

我該怎么做才能調試此問題？

更清楚一點：我正在嘗試通過字符代碼而不是簡單的字符串來呈現特定的字形。

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

Answer 2

一種解決方法是僅使用ico moon提供的SVG字體。 那行看起來像這樣：

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

我相信畫布需要SVG數據來呈現圖標，如果您使用其他各種字體格式（eot，woff，ttf）之一，則畫布不知道如何解釋unicode轉換。

好消息是，與html canvas相同的所有瀏覽器都支持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);