Question

In this jsfiddle the same text is drawn twice:

• first in white, in a solid font
• then in black, in an outline font

The two fonts, Londrina Solid and Londrina Shadow, are designed to have exactly the same metrics and to be used together in this way.

Is there a way to use CSS to achieve this effect without putting two copies of the text into the HTML? (Of course, I don’t want to put a copy of the text into the CSS, either.)

Answer 1

Five text-shadows is almost identical¹:

text-shadow: 0.03em 0.03em 0 black, -1.25px 0 0 black, 1.25px 0 0 black, 0 -1.25px 0 black, 0 1.25px 0 black;

Here’s a demo!

_{¹ Yes, I know this is an oxymoron.}