Question

我正在使用html5 canvas进行一些工作，我想通过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。

Answer 1

我自己遇到了这个问题。注意到如果您导入woff格式的字体，Chrome将正确渲染字形/文本。我没有通过这种方式观察到抗锯齿现象的恶化，但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; 
}

只需将woff声明放在svg-dito上方的行上。

干杯！

Answer 2

看起来像Chrome中的错误。字形索引中存在一个off-by-one错误。

请参阅http://jsfiddle.net/eUyr6/

ABC

呈现为

BCD

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

Chrome使用随机字符</canvas>在<canvas>上呈现SVG字体

2 个答案: