火狐4文本渲染错误

我碰到与我的应用程序中的错误，我追踪到Chrome和Firefox之间不一致的文字渲染4.火狐4文本渲染错误

铬告诉我，文本的某些字符串是215px宽，而火狐4告诉我它218px宽：

Chrome vs Firefox Text Rendering

搜索indicates，这个问题是与Firefox 4，Chrome浏览器不阿位。

以下代码呈现经由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>

有一种方法对浏览器之间一致地呈现文本？

来源

2011-06-03 Matt Mazur

有没有一种方法可以在浏览器之间一致地呈现文本？

简短回答：号码不能用fillText。

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

对于铬13.0.782.1，Safari浏览器5和Opera 11 I得到211

对于IE9我得到220

对于FF4我得到218

，这是特别有喜欢的字体的情况下Helvetica，并非每个用户都有。大多数Windows用户将有Arial而不是等等。

看帖子昨天here谈论fillText的一些当前问题。用fillText获得的最好结果是使用网络安全字体，并且不使用斜体或粗体，而是测试以确保其符合您对目标浏览器的喜好。

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

来源

2011-06-03 19:50:06

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

我的应用程序在很大程度上依赖于正确测量宽度，所以为了说明不一致性，我现在高估了文本的宽度5％，这在我的测试中作为跨宽度的上限所有浏览器。

来源

2011-06-06 00:46:46

火狐4文本渲染错误

回答

相关问题