Question

我遇到了我的应用程序的一个错误，我追溯到Chrome和Firefox 4之间不一致的文本呈现。

Chrome告诉我，某个文本字符串是215px宽，而Firefox 4则告诉我它的宽度为218px：

Chrome vs Firefox Text Rendering

稍微搜索indicates问题是Firefox 4，而不是Chrome。

以下代码在canvas元素上以及通过HTML呈现文本并输出宽度：

<html>
  <head>
    <title>Firefox 4 Text Rendering Bug</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.font = "bold 16pt Helvetica"
          ctx.fillText("MORE INFORMATION", 0, 16)
          alert(ctx.measureText("MORE INFORMATION").width); 
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
      h2 {font-size: 16pt; font-family: Helvetica; font-weight: bold }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="220" height="20"></canvas>
    <h2>MORE INFORMATION</h2>
  </body>
</html>

有没有办法在浏览器之间一致地呈现文本？

Answer 1

有没有办法在浏览器之间一致地呈现文本？

简短回答：否。不使用fillText。

答案很长：事实上，它在不同的操作系统和不同的操作系统设置上也会有所不同。这本身并不是Firefox的错误。如果有的话，FF4是最一致的。

对于Chrome 13.0.782.1，Safari 5和Opera 11，我得到211

对于IE9，我得到220

对于FF4，我得到218

对于像Helvetica 这样的字体尤其如此，并非每个用户都有。大多数Windows用户将使用Arial等等。

昨天查看帖子here，讨论fillText当前的一些问题。使用fillText获得的最佳效果是使用网络安全字体，不使用斜体或粗体，并进行测试以确保其足够一致，以满足您对目标浏览器的喜爱。

技术上正确但蹩脚的回答：是的，有一种方法可以一致地呈现文本。制作PNG并在浏览器中呈现图像。否则你只需找到在所有浏览器上最接近的字体。

Answer 2

Simon正确回答了问题：文本在浏览器中的呈现方式不同，并没有简单的解决方案来标准化它。

我的应用程序在很大程度上取决于正确测量宽度，所以为了解释不一致，我现在高估了文本的宽度5％，这在我的测试中作为所有宽度的良好上限。浏览器。

Firefox 4文本渲染错误

2 个答案: