4

我在 HTML5 画布中旋转了一个文本。它在除谷歌浏览器之外的所有浏览器上看起来都很好。它在 Windows 上的 chrome 上看起来失真。此外，它在 MAC 上看起来不错。为什么会这样？我正在使用 Chrome beta 20。是一些 HTML 5 问题还是一些 Google 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>
4

1 回答 1

3

我最近也经历了同样的头部撞击。简短的回答是，Chrome 在 Windows 上的字体渲染效果很差，而且转换后的字体从那里变得更糟。

如需更长、更技术性的答案，请查看此帖子：

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

除了尝试选择在 Chrome 中看起来“最差”的字体之外，没有什么可以做的。

于 2012-09-12T00:10:06.207 回答