画布上的文字在IE中看起来很垃圾......为什么？

Question

我最近扩展了可爱的jquery"flot"图表插件...目标是在图表上直接绘制图例中通常会出现的内容.

它看起来只是有点垃圾,因为IE似乎使字体非常弱.

看到这里,左边是IE,右边是Firefox:

问题http://i56.tinypic.com/34oq4ci.png

btw ...绘制使用的文字的函数是fillText()

我怎样才能让IE成型？

谢谢!

Answer 1

可悲的事实是，到目前为止，Canvas 中所有浏览器之间都存在字体差异。在 Firefox 中看起来是一种方式的东西在 IE 中看起来却是另一种方式。在 Chrome 中看起来是一种方式的东西在 Safari 中看起来却是另一种方式（即使它们都是基于 webkit 的）

将字体更改为“更安全”的字体，看看会发生什么。例如：

ctx.font = "72pt verdana"
ctx.fillText("lalalala", 0, 72);

应该在 IE9 和 FF4 中呈现相同的效果。

这当然不是最后一次。如果您正在执行缩放和旋转字体之类的操作，您会遇到更奇怪的问题。在 Opera 或 Chrome 的非开发版本中尝试一下：http://simonsarris.com/misc/scaleText.html

（该问题的屏幕截图）

因此，解决方案是简单地找到一种最终在您想要的目标浏览器上看起来相同的字体（通过反复试验，从网络安全字体列表开始），并尝试在调用之前永远不要缩放和旋转画布填充文本。甚至可能还有其他转换在不同的浏览器中导致奇怪的效果，因此您应该在简单的情况下尝试您的字体，看看它是否确实看起来不同。