4

Map

https://i.stack.imgur.com/YZp6L.jpg!

I have a map implemented via Raphael JS, which wraps VML and SVG to support cross web browsers drawing.

Everything looks good except the font in IE(6/7/8)

it seems AntiAliasing is turned on rendering the text in VML, and the text looks unclear and blur, please is there a way to turn off the AntiAliasing?

Mr.Wang from Next Door
  • 13,670
  • 12
  • 64
  • 97

2 Answers2

0
  1. Try to use not px in font-size. Use pt or %.
  2. You can use @font-face with eot font format. Custom fonts render without antialiasing.

Example:

<html>
<head>
   <style type="text/css">
      @font-face {
         font-family:comic;
         src:url(http://valid_url/some_font_file.eot);
      }
   </style>
</head>
<body>
   <p style="font-family: comic; font-size: 18pt;">This paragraph uses the font-face 
   rule defined in the above style element. The rule embeds an OpenType file for the 
   Comic Sans font. </p>
</body>
</html>

You can use FontSquirrel generator to generate EOT font file.

Alex
  • 11,115
  • 12
  • 51
  • 64
0

To the SVG tag, add shape-rendering = 'crispEdges'

Does that solve the issue?

You can also try adding font-smooth : never to your styles for the SVG.

Jonathan
  • 5,495
  • 4
  • 38
  • 53