cross browser text outline thickness using css - html

Question

Am in a need to provide outlines for text. These text say for eg: can be League name like Barclays Premier league, National Football League etc.
The closest i came with cross browser support is from the link below
https://www.alphachannelgroup.com/almost-cross-browser-text-stroke-outline-text/
but i would need thickness of outline that can vary between 10 - 20 pixels,
which am struggling to do. Please help
This is what i did
<style>
.element {
width: auto;
height: auto; /* width/height so IE7 and lower will work */
filter: glow(color=black,strength=1);
text-shadow: -10px -10px 0 #000,
10px -10px 0 #000,
-10px 10px 0 #000,
10px 10px 0 #000;
font-size:56px;
font-weight:bold;
color:#FFF;
}
</style>
and my div is
<div class="element">Hello Stranger</div>
and my output is blurry the screenshot is given below.
http://screencast.com/t/v9WPv9saYoS
the output am trying to get is given below
http://screencast.com/t/lMe1bubFht
the outline which is in color blue must be more thicker for me say 10px or 20px
thats what am trying to achieve.
UPDATE
failing to do so with text-shadows. am now trying cavas methods given link below
http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/
but still the thickness seems a problem i adjusted lineWidth to 10 and well it just
didnt work.... may be there exists some other option in canvas..if someone knows plese help.

Answer 1

Although -webkit-text-stroke is still non-standard feature and is not recommended for production, it has very good support in all modern browsers.
To make edges softer you can add multiple shadows with blur-radius equal to 0.5 of text-stroke-width. Also it would be good enough fallback for IE and Opera Mini (see the snippet).
#import url("https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap");
p {
font-family: sans-serif;
font-size: 80px;
line-height: 80px;
color: #eee;
}
.p1 {
font-family: "Permanent Marker";
}
.p2 {
font-family: sans-serif;
font-weight: 700;
}
.stroke {
text-stroke: 6px black; /* doesn't work yet, requires -webkit- */
-webkit-text-stroke: 6px black;
}
.shadow {
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black
}
<p class="p1 stroke">Text-Stroke 123 456 789 0</p>
<p class="p1 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p2 stroke">Text-Stroke 123 456 789 0</p>
<p class="p2 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p1 shadow">Fallback 123 456 789 0</p>
<p class="p2 shadow">Fallback 123 456 789 0</p>

Answer 2

Such a big stroke will never look good with text-shadow unfortunately. There is text-stroke, but only working with -webkit prefix (and not for IE or Opera), you can check out my demo:
http://jsfiddle.net/hmyXX/
.one {
font-size: 8em;
color:white;
-webkit-text-stroke: 5px white;
-webkit-text-fill-color: black;
}
.two {
font-size: 7em;
font-weight: bold;
text-shadow:
3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff,
-3px 3px 0 #fff, 0px 0px 0px #fff;
}
Your desired stroke would be bigger than the letter spacing, making it impossible to achieve with pure CSS. Maybe just have that as an image or less stroke if possible?

Answer 3

Browser support improved a lot, only IE and Opera don't support it yet, see
https://caniuse.com/#feat=text-stroke .
There is a handy sass mixin which offers cross-browser text stroke, see
https://github.com/hudochenkov/sass-text-stroke .
#import "~sass-text-stroke/_text-stroke";
p {
#include text-stroke(4, #369);
}