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?

Solution 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.

Solution 2

Firefox 48 now supports text strokes (with the -webkit prefix), as well as some other webkit-specific properties (like -webkit-text-fill-color). Just be wary that the specification isn't really there, and it will probably change in the future.

Here's an example that now works in Firefox:

.outline {
  -webkit-text-stroke: 1px red;
}

span:first-of-type { 
  display: block;
  font-size: 24pt;
  font-weight: bold;
}

<span class="outline">This text has a stroke.</span>
<span class="outline">(Even in Firefox)</span>

See the Mozilla website:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke