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

【问题标题】：SVG text looks different in Chrome compared to IE8与 IE8 相比，Chrome 中的 SVG 文本看起来不同
【发布时间】：2011-06-17 07:43:17
【问题描述】：

我正在尝试为我公司的主页设计一些文本。文本在 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

我正在使用拉斐尔 1.5.2。谢谢！

编辑：

我也愿意接受任何其他允许我显示带有细黑色轮廓（笔划）的特定字体的跨浏览器解决方案。

【问题讨论】：

标签： firefox google-chrome fonts svg raphael

【解决方案1】：

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

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

【讨论】：

问题是这个文本将用于图像背景，所以确实需要笔画来帮助文本突出。
你也可以使用 stroke-width 来加宽它，这样就可以覆盖填充颜色。
我已经有一段时间没有使用 SVG，但是代码对于 SVG 来说甚至看起来都不正确。不是必须声明命名空间吗？在 HTML5 中不确定，但无论如何在 IE 中都不起作用。所以，也许这就是为什么它在现代浏览器中看起来不太好，因为它首先不是正确的 SVG！

【解决方案2】：

我最终放弃了 raphael，并为 firefox/chrome 使用了 font-shadow，并为 IE 使用了轻微的 Glow 过滤器。这解决了我在所有主要浏览器上的问题。

【讨论】：