SVG text looks different in Chrome compared to IE8
I'm trying to stylize some text for my company's homepage. The text looks great in IE8 but does not look so good in Firefox or Chrome.
In firefox it looks like there is a few extra white pixels to the right of each character. In chrome the effect is similar, but does not happen for all letters.
<!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',
开发者_如何学JAVA '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>
Here are images showing the issue :
Firefox IE8 Chrome I'm using Raphael 1.5.2. Thanks!EDIT:
I'm also open to any other cross-browser solution that allows me to display a specific font with a thin black outline (stroke).
If you set the stroke colour to the same as the fill, it'll hide the slight rendering fault.
You should be aware that IE uses it's own vector rendering engine called VML rather than SVG. Raphael does a great job of hiding most of the differences for you but not all. The VML renderer has a number of bugs, that worst of which for your use is that IE7 will ignore the specified font family and always use Arial.
I ended up ditching raphael and using font-shadow for firefox/chrome, and a slight Glow filter for IE. This fixes my problem for all major browsers.
加载中,请稍侯......
精彩评论