CSS text-stroke Eigenschaft
Mit der CSS-Eigenschaft text-stroke legen Sie Breite und Farbe des Rahmens fest. Sehen Sie Eigenschaftswerte und üben Sie mit Beispielen.
Die Eigenschaft text-stroke zeichnet einen Umriss (einen Strich) um jedes Zeichen des Textes und gibt Ihnen die Kontrolle über den Rand der Glyphen, nicht nur über ihre Füllung. Sie ist eine Kurzschreibweise für zwei Langhand-Eigenschaften:
- text-stroke-width — wie dick der Umriss ist.
- text-stroke-color — welche Farbe der Umriss hat.
Diese Seite behandelt die Syntax, die akzeptierten Werte, eine Fallback-Strategie für nicht unterstützte Browser sowie ausführbare Beispiele.
Warum text-stroke verwenden
Web-Schriftarten basieren in der Regel auf Vektorgrafiken: Die Form einer Glyphe wird durch mathematische Kurven und Punkte beschrieben, nicht durch Pixel. Da der Umriss ein echter geometrischer Pfad ist, kann der Browser entlang dieses Pfades zeichnen – genau so, wie Vektorzeichenprogramme einem Shape einen Strich hinzufügen können. text-stroke macht diese Fähigkeit in CSS verfügbar, was praktisch für große Display-Überschriften, Logos oder „umrissene" Schriftzüge ist, bei denen ein text-shadow keine scharfe Kante erzeugen würde.
Ein häufiges Muster ist ein reiner Umriss-Buchstabe: Setzen Sie text-fill-color auf transparent, sodass das Innere jeder Glyphe leer bleibt und nur der Strich sichtbar ist.
text-stroke ist nicht standardisiert. In der Praxis müssen Sie es mit dem -webkit--Präfix schreiben (-webkit-text-stroke). Die Implementierungen unterscheiden sich leicht zwischen Browsern und das Verhalten kann sich in Zukunft ändern, stellen Sie daher immer einen Fallback bereit.
Browser-Unterstützung und Fallback
Da die Unterstützung nicht garantiert ist, sollten Sie sich niemals allein auf den Strich verlassen. Die Eigenschaft text-fill-color überschreibt die reguläre color-Eigenschaft nur in Browsern, die sie kennen. Die übliche Technik lautet daher:
p {
color: #1c87c9; /* fallback: plain colored text everywhere */
-webkit-text-fill-color: #f0f0f0; /* honored only where text-stroke works */
-webkit-text-stroke: 2px #1c87c9;
}Browser ohne -webkit-text-fill-color ignorieren diese beiden Zeilen und rendern einfachen #1c87c9-Text. Farben können Sie in der Referenz HTML colors nachschlagen.
| Anfangswert | 0 currentColor (d. h. Breite null) |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein (die Langhand-Eigenschaften text-stroke-width und text-stroke-color schon). |
| Version | Compatibility Standard |
| DOM-Syntax | object.style.webkitTextStroke = "1px #666"; |
Syntax
CSS text-stroke Werte
-webkit-text-stroke: <width> <color> | initial | inherit;Die beiden Teile sind reihenfolgenunabhängig und jeder von ihnen kann weggelassen werden. Die Breite akzeptiert jede CSS-Längen-Einheit (px, pt, em, cm, …); die Farbe akzeptiert jeden CSS-Farbwert.
Beispiel der text-stroke Eigenschaft:
CSS text-stroke Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Beispiel der text-stroke Eigenschaft mit mehreren Werten:
CSS text-stroke Mehrfachwerte-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 1px #8ebf42;
}
.b {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2pt #8ebf42;
}
.c {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 0.1cm #8ebf42;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Hier sind 1px, 2pt und 0.1cm allesamt gültige Breiteneinheiten, sodass die drei Absätze zunehmend dickere Umrisse erhalten.
Werte
| Wert | Beschreibung |
|---|---|
| length | Gibt die Dicke des Strichs an. |
| color | Gibt die Farbe des Strichs an. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |