Text Stroke and Shadow CSS3 in Firefox
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
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-shadow
s - 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.