text-stroke

text-stroke ist eine experimentelle Eigenschaft, die Textdekorationsoptionen bietet, die denen in Adobe Illustrator oder anderen Vektorgrafikanwendungen ähneln. Sie ist derzeit nicht in einer W3C- oder WHATWG-Spezifikation enthalten. Ab Juni 2013 ist sie nur hinter einem -webkit Vendor-Präfix implementiert, obwohl zukünftige Versionen von Firefox und Internet Explorer die Eigenschaft möglicherweise unterstützen werden (wahrscheinlich unter ihren eigenen Präfixen).

mark {
  text-stroke: 2px red;
}

Die text-stroke-Eigenschaft ist eigentlich eine Kurzschreibweise für zwei andere Eigenschaften

1. text-stroke-width, die einen Einheitswert (1px, 0,125em, 4 Zoll usw.) annimmt und die Dicke des Kontureffekts beschreibt.
2. text-stroke-color, die einen Farbwert (Hex, rgb/rgba, hsl/hsla usw.) annimmt.

text-stroke hat auch eine Begleiteigenschaft, text-fill-color, die die color-Eigenschaft überschreibt und einen graceful Fallback auf eine andere Textfarbe in Browsern ermöglicht, die text-stroke nicht unterstützen.

Interessante Punkte

• Die von text-stroke gezeichnete Kontur ist auf die Mitte der Textform ausgerichtet (wie in Adobe Illustrator standardmäßig), und es gibt derzeit keine Option, die Ausrichtung auf die Innenseite oder Außenseite der Form einzustellen. Das macht sie leider viel weniger nutzbar, da die Kontur unabhängig davon mit der Form des Buchstabens interferiert und die ursprüngliche Absicht des Typdesigners zerstört. Eine Einstellung wäre ideal, aber wenn wir eine wählen müssten, wäre die äußere Kontur viel nützlicher gewesen.
• In Webkit ist text-stroke mit CSS-Übergängen und -Animationen animierbar – aber nur die Konturfarbe, nicht die Konturbreite.
• Ein besser browserkompatibler (und wohl robusterer) Ersatz für den text-stroke-Effekt ist die Verwendung von text-shadow, wie in diesem CSS-Tricks-Artikel beschrieben.

Browser-Unterstützung

Weitere Informationen

• Surfin’ Safari: Text-Kontur vorstellen
• Kontur zu Web-Text hinzufügen
• Live-Editor

Verwandt