与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浏览器

回答

相关问题