Immer wenn ich an umrandeten Text im Web denke, denke ich: nö.
Es gibt -webkit-text-stroke in CSS dafür, aber es platziert diesen Strich mitten in der Vektorkontur der Zeichen, was absolut sicherstellt, dass das Zeichen nicht richtig aussieht. Schauen Sie sich das mal in Chrome oder Safari an. Gross. Wenn Sie es tun wollen, legen Sie zumindest die richtige Schriftart darüber, damit sie ihre ursprüngliche Integrität behält. Und selbst dann ist es nicht standardisiert und Sie erhalten keine browserübergreifende Unterstützung.
John Negoita behandelt Textstriche auf viele andere Arten. Eine weitere Möglichkeit, dies zu simulieren, ist die Verwendung von text-shadow in mehreren Richtungen.
Vier Richtungen, wie in der Abbildung oben, reichen normalerweise nicht aus, also wird er mathematisch. SVG kann Striche erzeugen, was man meinen sollte, dass es viel intelligenter ist, aber es hat das gleiche Problem wie CSS mit dem geteilten Strich – nur mit etwas mehr Kontrolle.
Ich würde auf jeden Fall davon abraten, Texte mit Strichen im Web zu verwenden, es sei denn, es handelt sich um eine einmalige Sache, in diesem Fall würde ich ihn in Design-Software in SVG umwandeln, den Strich simulieren und ihn als background-image verwenden.
Es ist möglich, cool auszusehen.
Eine Variante, die er für SVG-Text noch nicht erwähnt hat, ist die Verwendung von
paint-order, um den Strich hinter der Füllung zu legen: https://codepen.io/ccprog/pen/MWyOmgXWie wäre es mit paint-order: stroke;, um ihn nur hinter dem Text zu halten?
Ich erstelle selten Texte mit Strichen, und wenn ich es getan habe, habe ich es sparsam eingesetzt, aber bei diesen Gelegenheiten hat mir der 4-Wege-Textschatten-Trick gut funktioniert. Ich kombiniere ihn mit text-transform:uppercase und einer Schriftart mit geraden Linien.