Question

我正在尝试为我公司的主页设置一些文字样式。该文本在IE8中看起来很棒，但在Firefox或Chrome中看起来不太好。

在Firefox中，看起来每个角色右侧都有一些额外的白色像素。在chrome中效果类似，但并非所有字母都发生。

<!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

我正在使用Raphael 1.5.2。谢谢！

编辑：

我也对任何其他跨浏览器解决方案持开放态度，允许我显示具有黑色轮廓（笔划）的特定字体。

Answer 1

如果将笔触颜色设置为与填充相同，则会隐藏轻微的渲染错误。

你应该知道IE使用它自己的矢量渲染引擎，称为VML而不是SVG。拉斐尔在为你隐藏大部分差异方面做得很好，但不是全部。 VML渲染器有许多错误，其中最糟糕的是IE7将忽略指定的字体系列并始终使用Arial。

Answer 2

我最终放弃raphael并使用font-shadow for firefox / chrome，以及一个轻微的Glow过滤器用于IE。这解决了我所有主流浏览器的问题。

与IE8相比，Chrome中的SVG文本看起来有所不同

2 个答案: