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

1つの修正は、icomoonが提供するSVGフォントを使用することです。これは次のような行です。

url（'../ fonts / icomoon.svg＃icomoon'）format（'svg'）

他のさまざまなフォント形式（eot、woff、ttf）のいずれかを使用している場合、キャンバスはユニコード変換の解釈方法を知らないため、アイコンをレンダリングするためにキャンバスにSVGデータが必要だと思います。

良いニュースは、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;

}

于 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 に答える