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 回答
1

看起来像 Chrome 中的一个错误。字形索引中有一个错误。

见http://jsfiddle.net/eUyr6/

ABC

呈现为

BCD

我已向 Chrome 开发人员提交了错误报告。

于 2013-05-20T19:25:33.583 回答