Giving text some outline
Having the ability to implement a custom font is cool, but sometimes you need
that extra edge (pun intended). With the
you can achieve just that.
This example currently only works in Chrome and Safari, it may work in another browser in the future... Not to be left out, we've added some screenshots.
Screenshots of above examples
How does it work?
It's quite simple. By setting a
text-stroke-width you define the
stroke width (in your favourite unit) and by setting
text-stroke-color the outline gets its color.
There is a property to define the
text-fill-color which will override the
color definition. This might look redundant, but helps providing a fallback color to browsers that don't
text-stroke is currently webkit only (meaning: Chrome and Safari) and is
not part of any CSS specification at the moment. You can however fake
the outline effect by using
text-shadow, see the article Adding Stroke to Web Text
on css-tricks.com for an example.
Show us the source!
Feel free to look around the different source files we used for this example.