與IE8相比，Chrome瀏覽器中的文本看起來不同於Chrome瀏覽器

我正在嘗試爲我公司的主頁設置一些文本風格。文字在IE8中看起來不錯，但在Firefox或Chrome中看起來不太好。與IE8相比，Chrome瀏覽器中的文本看起來不同於Chrome瀏覽器

在Firefox中，它看起來像每個字符右側有一些額外的白色像素。鉻在效果是相似的，但不會發生所有字母。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="js/raphael-min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     window.onload = function() {              
      var paper = Raphael(10, 0, 600, 400); 

      var lbl = paper.text(135, 40, "AaEeIiOoUuYy").attr({ 
       "font" : '36px Franklin Gothic Medium, Helvetica, Arial',      
       stroke : "#000", 
       fill : '#ffffff', 
       'font-weight' : 'bold', 
       'text-anchor' : 'start', 
       'stroke-opacity' : .9    
      }); 
      var lbl = paper.text(0, 90, "AaEeIiOoUuYy").attr({ 
       "font" : '62px Franklin Gothic Medium, Helvetica, Arial',  
       stroke : "#000", 
       fill : '#ffffff',  
       'font-weight' : 'bold',    
       'text-anchor' : 'start', 
       'stroke-opacity' : .9 
      }); 
     }  
    </script> 
    <style type="text/css"> 
     #page 
     {   
      background: #000; 
      width:100%;   
      height: 600px; 
     } 
    </style> 
</head> 
<body>  
    <div id="page"> 
    </div> 
</body> 
</html>

這裏是顯示問題圖片：

Firefox
IE8
Chrome

我使用的是拉斐爾1.5.2。謝謝！

編輯：

我也開放，以任何其他跨瀏覽器的解決方案，允許我用薄黑色輪廓（中風）顯示特定的字體。

來源

2011-01-28 KClough

我最終放棄了raphael，並使用font-shadow作爲firefox/chrome，以及IE的輕微Glow過濾器。這解決了我所有主流瀏覽器的問題。

來源

2011-01-28 21:21:34 KClough

如果將筆觸顏色設置爲與填充相同，則會隱藏輕微的渲染錯誤。

你應該知道IE使用它自己的矢量渲染引擎VML而不是SVG。拉斐爾爲你隱藏了大部分差異，但並非全部都做得很好。 VML渲染器有許多錯誤，其中最糟糕的是您使用的是IE7將忽略指定的字體系列並始終使用Arial。

來源

2011-01-28 16:18:49 leebriggs

問題是這個文本將在圖像背景上使用，所以筆畫真的需要幫助文字脫穎而出。 – KClough 2011-01-28 17:05:44

與IE8相比，Chrome瀏覽器中的文本看起來不同於Chrome瀏覽器

回答

相關問題