CSS Text-Stroke Generator

Woher der CSS-Textumriss kommt

Die Idee, einen Glyphen zu umranden, geht dem CSS um Jahrzehnte voraus; sie ist in PostScript (Adobe, 1984) nativ und wurde in SVG 1.1 (W3C-Empfehlung, 2. Ausgabe, 16. August 2011) übernommen, das die Malattribute stroke, stroke-width, stroke-linecap und stroke-linejoin für jede Form einschließlich <text> definiert. CSS bekam seine eigene Version, als Apple -webkit-text-stroke in Safari 3 im Juni 2007 ausgeliefert hat, zusammen mit -webkit-text-fill-color. Die Eigenschaft wurde nie in einer veröffentlichten W3C-Spezifikation standardisiert; sie lebt im Editor's Draft des CSS Text Decoration Module Level 4 als unpräfigiertes text-stroke, aber ab 2026 ist der unpräfigierte Name noch in keinem Browser aktiviert. Firefox 49 (20. September 2016) und Edge 15 (5. April 2017) haben beide -webkit-text-stroke als expliziten Web-Kompatibilitätsalias hinzugefügt, um Seiten zu behandeln, die nur den WebKit-präfigierten Namen verwenden. In der Produktion schreiben Sie den Präfix.

Drei Möglichkeiten, Text im Web zu umranden

Es gibt mehr als eine Möglichkeit, einen Umriss um Text zu zeichnen. Das richtige Werkzeug hängt von der Breite, dem Lesbarkeitsbudget und davon ab, ob die zugrundeliegenden Glyphen scharf bleiben müssen:

• -webkit-text-stroke, die Eigenschaft, die dieser Generator ausgibt. Eine Zeile CSS, GPU-komponiert, kostenlos bei jeder Framerate. Der Umriss wird zentriert auf dem Glyphenumriss gezeichnet, halb innen und halb außen, was bedeutet, dass dicke Umrisse anfangen, in die Buchstabenformen zu fressen.
• Vier-Richtungs-text-shadow, der universelle Fallback, der in jedem Browser bis zurück zu IE 10 funktioniert. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; stapelt vier 1-Pixel-Schatten in jeder Ecke, um einen 1 px-Umriss vorzutäuschen. Definiert in CSS Text Decoration Module Level 3 (W3C Candidate Recommendation August 2019). Bei breiteren Umrissen werden Treppenstufen-Artefakte sichtbar; acht oder sechzehn Richtungen können sie glätten, auf Kosten von mehr Schatten.
• SVG <text> mit paint-order: stroke fill;, die richtige Antwort, wenn Sie einen dicken Umriss brauchen, ohne dass Tinte in die Buchstabenform blutet. Die Eigenschaft paint-order zeichnet zuerst den Umriss, dann die Füllung darüber, sodass die Füllung in ihrer vollen angekündigten Breite bleibt.

Barrierefreiheit: Kontrastlogik, kein Fließtext, dekorativ ja

Das WCAG 2.1 Erfolgskriterium 1.4.3 «Kontrast (Minimum)» (W3C-Empfehlung 5. Juni 2018) erfordert 4,5:1 Kontrast für normalen Text und 3:1 für großen Text (18 pt / 14 pt fett). Mit einem angewendeten Umriss ist die visuell dominante Kante des Glyphen die Umrissfarbe, daher muss die Kontrastprüfung diese Farbe mit dem Hintergrund vergleichen, nicht die Füllung. Ein häufiger Fehler: ein gelbes Logo auf Weiß mit einem dünnen schwarzen Umriss besteht, wenn Sie Schwarz vs. Weiß überprüfen, aber der Körper des Buchstabens ist Gelb auf Weiß und liest sich bei kleinen Größen schlecht. Umrisse zerstören die Lesbarkeit bei Fließtext. Unter 16 px Schriftgröße füllt ein 1-px-Umriss 10 bis 15 Prozent des Glypheninneren und ein 2-px-Umriss kann Gegenformen schließen (die Löcher in «a», «e», «o»). Reservieren Sie Textumriss für Überschriften, Display-Typografie und dekorative Verwendung; wenden Sie ihn niemals auf Absatztext ohne explizite Tests an jedem Breakpoint an.

Wann ein Textumriss das richtige Werkzeug ist

• Comic-Buch- und Gaming-UI-Titel: der klassische Marvel- / Nintendo-Look mit fettem schwarzem Umriss auf hellem Füllen.
• Wasserzeichen und dekorative Overlays: nur halbtransparenter Umriss, keine Füllung, über Bildern sitzend.
• Tutorial-Grafiken, Screenshots, Callouts, wo der Text sich gegen einen unbekannten Hintergrund abheben muss.
• «Geister»-Buttons, bei denen der Button-Text einen Umriss und eine transparente Füllung verwendet, um sich mit dem umrandeten Button selbst gewichtsmäßig abgestimmt zu fühlen.
• Nur-Umriss-Überschriften im redaktionellen Design, der «hohle Buchstabe»-Look, der Ende der 2010er Jahre groß war.

Häufige Fehler

• Den -webkit--Präfix vergessen. Das unpräfigierte text-stroke ist nur im Editor's Draft-Status und nicht ausgeliefert. Schreiben Sie immer die präfigierte Form in der Produktion.
• Versuchen, -webkit-text-stroke-width zu animieren. Es ist nicht auf der Liste der animierbaren CSS-Eigenschaften. Übergänge werden «springen», anstatt zu interpolieren. Animieren Sie text-shadow oder verwenden Sie SVG, wenn Bewegung erforderlich ist.
• Anwenden eines Umrisses auf kleinen Text. Unter 16 px füllt der Umriss das Glypheninnere und schließt Gegenformen. Setzen Sie einen Mindestschriftgrößen-Schutz mit einer Media Query.
• Kombinieren breiter Umrisse mit engem letter-spacing. Der Umriss kreuzt zwischen benachbarten Glyphen und produziert graue Verschmierungen, wo sich die Formen berühren.
• Die Umrissfarbe als «Textfarbe» in Kontrastprüfungen zählen. Sowohl die Füllung als auch der Umriss müssen WCAG 1.4.3 gegen den Hintergrund bestehen.
• Druckstilvorlagen nicht testen. Umrisse können beim Drucken dramatisch dicker oder dünner rendern, besonders in Browsern, die das Farbgamut für die PDF-Ausgabe herunterskalieren.

Weitere häufig gestellte Fragen

Warum sieht mein Umriss auf einem Retina-Display dicker aus als auf einem 1080p-Monitor?

Tut er nicht, in CSS-Pixeln. Ein 2px-Umriss ist auf beiden genau 2 CSS-Pixel. Was sich ändert, ist die wahrgenommene Schärfe: auf einem Retina-Display (2× DPR) sind 2 CSS-Pixel Umriss 4 Gerätepixel und antialiasieren sauber. Auf einem 1× Display geben 2 Gerätepixel eine merklich unschärfere Kante. Wenn Sie eine Haarlinie brauchen, die auf Retina auf ein Gerätepixel einrastet, schreiben Sie 0.5px; Browser runden auf ein Gerätepixel auf High-DPR-Bildschirmen.

Kann ich eine andere Umrissfarbe für jeden Buchstaben haben?

Nicht mit einer einzelnen -webkit-text-stroke-Deklaration. Entweder umhüllen Sie jeden Buchstaben in einem <span> und stylen einzeln, oder verwenden Sie SVG-<tspan>-Elemente mit eigenem stroke-Attribut. Das ::first-letter-Pseudoelement akzeptiert text-stroke, wenn Sie nur den ersten Buchstaben anders haben möchten.

Wie dick ist zu dick für einen Umriss?

Eine praktische Obergrenze ist etwa 8 Prozent der Schriftgröße. Bei 100 px Schrift sind das 8 px Umriss; darüber beginnen die Buchstaben einander zu überlappen. Wenn Sie eine dickere Umrissoptik wünschen, verwenden Sie SVG <text> mit paint-order: stroke fill;, damit die Füllung in der ursprünglichen Breite bleibt und sich der Umriss nur nach außen erstreckt.

Funktioniert -webkit-text-stroke bei Emojis?

Bei farbigen Emojis (Standard in modernen Browsern) wird der Umriss auf die äußere Silhouette des Emoji-Glyphen angewendet. Das Ergebnis ist normalerweise subtil, weil das Emoji bereits seinen eigenen Umriss und Schatten hat. Für schwarz-weiße Emojis (die text-Schriftvariante) wird der Umriss sauber angewendet wie bei jedem anderen Glyphen.

Wird etwas an einen Server gesendet?

Nein. Der Text, den Sie in die Vorschau eingeben, die Farben, die Sie wählen, und das generierte CSS werden alle im JavaScript Ihres Browsers verarbeitet. Es wird kein Netzwerkaufruf gemacht. Öffnen Sie den Netzwerk-Tab in DevTools zur Überprüfung.