Chrome 在 <canvas> 上使用随机字符渲染 SVG 字体答案

【问题标题】：Chrome rendering SVG font on <canvas> with random charactersChrome 在 <canvas> 上使用随机字符渲染 SVG 字体
【发布时间】：2013-05-13 02:27:42
【问题描述】：

我正在使用 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。

【问题讨论】：

标签： google-chrome canvas svg

【解决方案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-declaration 放在 svg-dito 上方的行上即可。

干杯！

【讨论】：

【解决方案2】：

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

见http://jsfiddle.net/eUyr6/

ABC

呈现为

BCD

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

【讨论】：

我不敢相信我没有注意到这是一个字符！问题是它实际上并没有使用字体，即使它是在渲染一些东西。
有没有想过这个问题？我在使用不同字体时遇到了完全相同的问题。