3

私は html5 キャンバスで少し作業を行っています。CSS @font-face を介して SVG フォントを使用してテキストをレンダリングしたいと考えています。残念ながら、Chrome はキャンバス上の SVG フォントをランダムな奇妙な文字としてレンダリングするようです。他のフォント タイプを使用することは、アンチエイリアスが非常に不十分なため、実際にはオプションではありません。

var context = $('canvas')[0].getContext("2d");

context.fillStyle = '#333333';
context.font = "20px Chela_One";
context.textBaseline = 'top';
context.textAlign = 'left';
context.fillText('Sample Text', 0, 0);

これを示すためにフィドルを作成しました：http://jsfiddle.net/9t6Kf/7/

Safari (Webkit も) では、キャンバス SVG フォントは正常に動作します。ただのクロムのようです。この奇妙さについて何か知っている人はいますか？

編集

テキストが正常に見える場合は、フォントが読み込まれていない可能性があるため、もう一度実行を押して、Times New を使用します。

4

2 に答える 2

3

Just ran into this problem myself. Noticed that if you import fonts of the woff-format instead, Chrome will render the glyphs/text properly. I haven't observed a worsened anti-aliasing this way but YMMV.

@font-face {
  font-family: "Open Sans";
  src: url("../css/fonts/opensans_regular.eot");
  src: url("../css/fonts/opensans-regular.eot?#iefix") format("embedded-opentype"), 
    url("../css/fonts/opensans-regular.woff") format("woff"), 
    url("../css/fonts/opensans-regular.svg#opensansregular") format("svg"), 
    url("../css/fonts/opensans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; 
}

Just place the woff-declaration on the line above the svg-dito.

Cheers!

于 2013-05-22T18:06:40.250 に答える