Text Stroke and Shadow CSS3 in Firefox

Question

I was wondering if there was a way of adding a stroke and shadow to text, I can get it working in Chrome and Safari as webkit supports text-stroke and text-shadow. I can get the stroke to display in Firefox but that is using text-shadow and playing with the offset. So does anyone know a way around this issue?

Answer 1

The text-stroke property isn't part of the standard CSS spec, so it's best to avoid it - Chrome would be well within their rights to pull out it at any time.

You're right that you can create text-stroke-like effects using multiple comma-separated text-shadows - in fact you can use the same technique to add an 'actual' shadow as well:

h1 {
  font-size: 6em;
  font-weight: bold;
  text-shadow: 1px  1px 0   #F00,
              -1px -1px 0   #F00,
               1px -1px 0   #F00,
              -1px  1px 0   #F00,
               3px  3px 5px #333;
}

<h1 style="margin:0">Hello World</h1>

Be careful though, because text-shadow isn't supported in IE9 and below either. I'd recommend only using it for non-essential styling: make sure the text is still just as readable when the shadow / faux outline isn't there.