Text with outline and text shadow - html

Question

I want to create following font style. If not possible I want to be as close to this style as possible. I need to support IE so I cannot use text-stroke.
The closest way I have come is to use multiple text-shadow attributes, for example:
h1 {
color: #2e536f;
font-weight: bold;
font-family: sans-serif;
font-size: 7em;
text-transform: uppercase;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
-2px -5px 0px #ff7c7c;
}
body {
background: #2e536f;
}
<h1>Zwei</h1>
While it does several tasks, I cannot make the color transparent, to reveal the text shadow behind it.
How can I solve this?

Answer 1

If you need to support IE, your best bet is to go for SVG. You can easily give stroke and/or shadow to text to make the exact style you are looking for. This can fit titles but might be a hassle for text that spans several lines though.
Here is your example with an inline SVG:
body {
background: #2e536f;
}
svg {
font-weight: bold;
font-family: sans-serif;
}
<svg viewbox="0 0 10 3">
<text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text>
<text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text>
</svg>
Note that using SVG (even for titles) doesn't impact SEO and google indexes SVG since 2010

Answer 2

body {
background: #2e536f;
}
h1 {
color: #2e536f;
font-weight: bold;
font-family: sans-serif;
font-size: 7em;
text-transform: uppercase;
text-shadow:
-1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c
}
<h1>Zwei</h1>
Can this be close to your expected output?