There is a non-standard way to stroke HTML text (SVG has a standard way). It’s not particularly new. There are
-webkit-and-moz-prefixes for it. Jen Simmons recently posted about it, with an example:
Code language: CSS
span {
-moz-text-fill-color: #fde;
-webkit-text-fill-color: #fde;
-moz-text-stroke-color: #666;
-webkit-text-stroke-color: #666;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
}
And she’s right:
This CSS isn’t fully-baked or fully-supported. But it’s good enough to be used today, especially since it’s simply offering a visual enhancement. It’s not mission critical to making a website usable.
I’d only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a
@supportsto be extra sure it’ll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color) :
Code language: CSS
@supports
((-webkit-text-stroke-color: #666)
and
(-webkit-text-fill-color: white))
or
((-moz-text-stroke-color: #666)
and
(-moz-text-fill-color: white)) {
span {
-moz-text-fill-color: white;
-webkit-text-fill-color: white;
-moz-text-stroke-color: #666;
-webkit-text-stroke-color: #666;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
}
}
See the link for more tricks, and the comments make a good point that you don’t have to use text-fill-color if you’re using @supports: just use color.