火狐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文本渲染錯誤

回答

相關問題