2

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?

skaffman
  • 398,947
  • 96
  • 818
  • 769
Paul
  • 33
  • 1
  • 5

3 Answers3

0

Use SVG instead.Take a look here

dani visi
  • 1
0

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.

Nizam Kazi
  • 1,900
  • 1
  • 20
  • 26
0

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

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Can you suggest a proper way to do it? And I can't use an image, this text will be dynamic. – Paul Jan 18 '12 at 20:27
  • You can try putting text on top of text in different sizes, or a Flash text replacement? (eek!) http://www.mikeindustries.com/blog/sifr. This isn't really a "ready for prime time" feature. – Diodeus - James MacFarlane Jan 18 '12 at 20:37
  • Text on top of text didn't seem to be a good solution when I tried because making the text just 1px bigger made it too big to act as an outline. I also tried using multiple layers of text on text which can also work kinda good (visually) but the problem lies within making thicker borders where many layers are needed to get the text behind acting as a border to fully stroke the text in front and eventually it just starts getting too spread apart and causes more gaps. – Paul Jan 18 '12 at 21:20
  • Yeah, I don't think there's an easy solution to this. Sorry. – Diodeus - James MacFarlane Jan 18 '12 at 21:23