html - Canvas 上的文字在 IE 中看起来很垃圾...为什么？

Question

我最近稍微扩展了可爱的 jquery“flot”图表插件......目标是直接在图表上绘制通常在图例中的内容。

它看起来只是有点垃圾，因为 IE 似乎渲染字体很弱。

看这里，左边是IE，右边是Firefox:

issue http://i56.tinypic.com/34oq4ci.png

顺便说一句...绘制所用文本的函数是 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

( screenshot of that problem )

所以解决方案是简单地找到一种字体，它最终在您想要定位的浏览器上看起来相同(通过反复试验，从网络安全字体列表开始)，并尽量不要同时缩放 并在调用 fillText 之前旋转 Canvas 。甚至可能还有其他转换会在不同的浏览器中产生奇怪的效果，因此您应该在一个简单的案例中尝试您的字体，看看它是否真的看起来不同。