text-strokeist eine experimentelle Eigenschaft, die Textdekorationsoptionen bietet, die denen in Adobe Illustrator oder anderen Vektorzeichnungsanwendungen ähneln. Es ist derzeit in keiner W3C- oder WHATWG-Spezifikation enthalten. Ab Juni 2013 wird es nur hinter einem -webkitHerstellerpräfix implementiert , obwohl zukünftige Versionen von Firefox und Internet Explorer die Eigenschaft möglicherweise unterstützen (wahrscheinlich unter ihren eigenen Präfixen).
mark ( -webkit-text-stroke: 2px red; )Die text-strokeEigenschaft ist eigentlich Abkürzung für zwei andere Eigenschaften:
text-stroke-width, der den Einheitswert (1px, 0,125em, 4in usw.) annimmt und die Dicke des Stricheffekts beschreibt.text-stroke-color, der einen Farbwert annimmt (hex, rgb / rgba, hsl / hsla usw.).
text-strokeverfügt außerdem über eine Companion-Eigenschaft, text-fill-colordie die colorEigenschaft überschreibt und in Browsern, die dies nicht unterstützen, einen ordnungsgemäßen Rückgriff auf eine andere Textfarbe ermöglicht text-stroke.
Sehenswürdigkeiten
- Der von gezeichnete Strich
text-strokewird an der Mitte der Textform ausgerichtet (wie in Adobe Illustrator standardmäßig festgelegt). Derzeit gibt es keine Option, um die Ausrichtung innerhalb oder außerhalb der Form festzulegen. Leider ist es dadurch viel weniger benutzerfreundlich, da der Strich jetzt die Form des Buchstabens beeinträchtigt und die Absicht der ursprünglichen Schriftdesigner zerstört. Eine Einstellung wäre ideal, aber wenn wir eine auswählen müssten, wäre ein Außenhub viel nützlicher gewesen. - in Webkit
text-strokeist mit CSS-Übergängen und -Animationen animierbar - aber nur die Strichfarbe, nicht die Strichbreite. - Es wird ein browserkompatiblerer (und wahrscheinlich robusterer) Ersatz für den
text-strokeEffekt verwendettext-shadow, der in diesem CSS-Tricks-Artikel beschrieben wird.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Kompliziert | -webkit- |
Hinweis zur Browserunterstützung: Die obige Tabelle enthält eine Zusammenfassung der allgemeinen Browserunterstützung für text-stroke- die Wahrheit ist viel komplizierter (z. B. hat Android die Eigenschaft in den Versionen 2.1-2.3 unterstützt und dann die Unterstützung in 3.0 entfernt, bevor die Unterstützung in 4.0 wiederhergestellt wurde). . Die vollständige Tabelle zur Browserunterstützung finden Sie unter caniuse.com/text-stroke.