Best way to do a solid Text Outline/Stroke in all browsers?

Question

I'm having a problem applying a outline/stroke to text that looks good and/or even works on every browser. Right now I'm using:

<div style="font-family: Helvetica,sans-serif;color: #FFFFFF;font-size:40px;font-weight:bold;letter-spacing:-1px;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;filter:DropShadow(Color=#000000, OffX=2, OffY=2);">Text Example</div>

And while this applies an outline to the text on Firefox, Chrome, and Safari -- it doesn't look that good with some corners not using an outline and the outline doesn't even work in IE so it switches to just using a shadow. Is there a better method of applying a text outline/stroke that will look better and work in every browser?

Answer 1

Text shadow wasn't intended to emulate stroke, so caveat emptor.

Answer 2

Actually text-shadow is not meant to add stroke to text, so it doesn't generate accurate effect you want. However it look acceptable if you are using 1px/-1px size of shadow.

you can try JavaScript for that.. "http://www.netzgesta.de/dev/text/#overview"

see if it helps you.

Answer 3

Use SVG instead.Take a look here