Cross Browser Text Outline Thickness Using Css

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 brows

Solution 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: 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black, 003px black
}

<pclass="p1 stroke">Text-Stroke 123 456 789 0</p><pclass="p1 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p><pclass="p2 stroke">Text-Stroke 123 456 789 0</p><pclass="p2 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p><pclass="p1 shadow">Fallback 123 456 789 0</p><pclass="p2 shadow">Fallback 123 456 789 0</p>

Solution 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:
3px3px0#fff, -3px -3px0#fff, 3px -3px0#fff,
-3px3px0#fff, 0px0px0px#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?

Solution 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);
}