Firefox 与IE8相比，Chrome中的SVG文本看起来有所不同
我正在尝试为我公司的主页设计一些文本样式。该文本在IE8中看起来很棒，但在Firefox或Chrome中看起来不太好 在firefox中，每个字符的右侧似乎都有一些额外的白色像素。 在chrome中，效果类似，但并非所有字母都会出现这种情况Firefox 与IE8相比，Chrome中的SVG文本看起来有所不同,firefox,google-chrome,fonts,svg,raphael,Firefox,Google Chrome,Fonts,Svg,Raphael,我正在尝试为我公司的主页设计一些文本样式。该文本在IE8中看起来很棒，但在Firefox或Chrome中看起来不太好 在firefox中，每个字符的右侧似乎都有一些额外的白色像素。 在chrome中，效果类似，但并非所有字母都会出现这种情况 <!DOCTYPE html> <html lang="en"> <head> <script src="js/raphael-min.js" type="text/javascript"></s
<!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>
window.onload=函数（）{
var paper=Raphael（10,0,600,400）；
var lbl=纸张文本（135,40，“aaeeiiouuuyy”）.attr（{
“字体”：“36px富兰克林哥特式中型，赫尔维蒂卡，Arial”，
笔画：“000”，
填写：“#ffffff”，
“字体大小”：“粗体”，
“文本锚定”：“开始”，
“笔划不透明度”：
});
var lbl=纸张.text（0,90，“aaeeiiouuuyy”）.attr（{
“字体”：“62px富兰克林哥特式中型，赫尔维蒂卡，Arial”，
笔画：“000”，
填写：“#ffffff”，
“字体大小”：“粗体”，
“文本锚定”：“开始”，
“笔划不透明度”：
});
}
#页面
{
背景：#000；
宽度：100%；
高度：600px；
}
我用的是拉斐尔1.5.2。谢谢 编辑：
我也愿意接受任何其他跨浏览器解决方案，它允许我显示带有黑色细轮廓（笔划）的特定字体 如果将笔划颜色设置为与填充相同，则会隐藏轻微的渲染错误
您应该知道IE使用它自己的向量渲染引擎VML而不是SVG。拉斐尔在为你隐藏大部分差异方面做得很好，但不是全部。VML渲染器有很多错误，最糟糕的是IE7会忽略指定的字体系列，而总是使用Arial。我最终抛弃了raphael，在firefox/chrome上使用了字体阴影，还有一个用于IE的轻微发光过滤器。这解决了我在所有主要浏览器上的问题。问题是此文本将用于图像背景，因此确实需要笔划来帮助文本突出。您还可以使用笔划宽度来加宽它，我已经有一段时间没有使用SVG了，但是代码看起来对SVG都不正确。名称空间不是必须声明吗？在HTML5中不确定，但在IE中无论如何都不行。所以，也许这就是为什么它在现代浏览器中看起来不好的原因，因为它首先不是合适的SVG！