我在HTML5画布中旋转了一个文本。它在除了谷歌chrome之外的所有浏览器上都很好。在Windows上，它在镀铬上看起来失真了。此外，它在MAC上看起来不错。为什么会这样？我正在使用Chrome beta 20。是HTML 5的问题还是谷歌Chrome或Windows的问题？如何解决此失真问题？
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "12pt Calibri";
context.rotate(Math.PI/2.5);
context.fillText("Competitive Landcaping!", 450, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="878" height="2000"></canvas>
</body>
</html>
我最近也经历了同样的头痛。简单的答案是，Chrome在Windows上渲染字体的效果很差，而转换后的字体会变得更糟。
要获得更长、更技术性的答案，请查看以下帖子：
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
除了尝试选择Chrome中看起来"最不差"的字体外，没有什么可做的。