CSS text-stroke-width Eigenschaft

Die Eigenschaft -webkit-text-stroke-width legt fest, wie dick die Kontur (Strich) sein soll, die um jedes Zeichen gezeichnet wird. Sie ist eine Hälfte der text-stroke-Funktion: Diese Eigenschaft steuert die Breite der Kontur, während text-stroke-color deren Farbe steuert.

Ein Textstrich wird über der normalen Buchstabenfüllung gezeichnet, zentriert am Rand jedes Glyphen. Bei einer größeren Breite wirken die Buchstaben umrandet oder „hohl"; bei einer Breite von 0 (dem Standard) wird überhaupt kein Strich gezeichnet. Das macht es zu einer beliebten Methode, um fette Display-Überschriften, Knockout-Text und dekorative Titel zu erstellen, ohne auf ein Bild umzusteigen.

h1 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #1c87c9;
}

Warum und wann man es verwendet

Greifen Sie auf text-stroke-width zurück, wenn Sie einen Kontureffekt wünschen, der bei jeder Größe scharf bleibt und echten, auswählbaren Text darstellt:

Umrandete Überschriften — geben Sie einer Überschrift einen farbigen Rahmen für ein plakatartiges Aussehen.
Knockout- / Hohltext — kombinieren Sie einen Strich mit text-fill-color: transparent, sodass nur die Kontur sichtbar ist und der Hintergrund durch die Buchstaben scheint.
Lesbarkeit über Bildern — ein dünner Strich kann hellen Text von einem unruhigen Hintergrund abgrenzen, ähnlich wie text-shadow, aber enger am Glyphen.

Info

text-stroke-width ist keine eigenständige standardisierte Eigenschaft. Die Standardform ist die Kurzschreibweise text-stroke (CSS Text Decoration Level 4). In der Praxis erfordert jeder aktuelle Browser noch das -webkit--Präfix. Verwenden Sie daher -webkit-text-stroke-width für die Breite und kombinieren Sie es mit -webkit-text-stroke-color für die Farbe.

Worauf man achten sollte

Immer auch eine Farbe angeben. Eine Breite ohne -webkit-text-stroke-color fällt auf currentColor (die Textfarbe des Elements) zurück, sodass der Strich gegenüber der Füllung unsichtbar sein kann. Setzen Sie beide Werte, oder verwenden Sie die Kurzschreibweise text-stroke: -webkit-text-stroke: 2px #1c87c9;.
Die Breite wächst nach innen und außen. Der Strich wird zentriert am Glyphenrand gezeichnet, daher frisst ein breiter Strich bei kleinem Text in die Buchstabenformen und beeinträchtigt die Lesbarkeit. Verwenden Sie größere font-size-Werte für breitere Striche.
Nicht animierbar. Das direkte Animieren der Breite bewirkt nichts.
Einen Fallback bereitstellen. Browser ohne -webkit-text-stroke-Unterstützung ignorieren die Eigenschaft einfach und zeigen den einfachen Text an, daher sollte das Ergebnis auch ohne Strich lesbar sein.

Anfangswert	0
Gilt für	Alle Elemente.
Vererbbar	Nein.
Animierbar	Nein
Version	CSS Text Decoration Module Level 4 (vendor-prefixed)
DOM-Syntax	object.style.webkitTextStrokeWidth = "1px";

Syntax

CSS text-stroke-width Werte

-webkit-text-stroke-width: length | initial | inherit;

Beispiel der text-stroke-width-Eigenschaft:

Verschiedene Einheiten (px, mm) legen alle die Strichstärke fest. Hier teilen sich drei Absätze dieselbe Strichfarbe, verwenden aber dünne, mittlere und dicke Breiten, sodass Sie diese vergleichen können.

CSS text-stroke-width Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p, h2 {
        margin: 0;
        font-size: 4em;
        -webkit-text-stroke-color: #1c87c9;
      }
      .thin {
        -webkit-text-stroke-width: 1px;
      }
      .medium {
        -webkit-text-stroke-width: 3.5px;
      }
      .thick {
        -webkit-text-stroke-width: 1.3mm;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-width property example</h2>
    <p class="thin">Lorem Ipsum </p>
    <p class="medium">Lorem Ipsum</p>
    <p class="thick">Lorem Ipsum</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel für Hohltext (Knockout):

Wenn man text-fill-color auf transparent setzt, wird die Buchstabenfüllung ausgeblendet, sodass nur der Strich gezeichnet wird. Dies ist der klassische Effekt für „nur Kontur"-Überschriften.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 5em;
        font-family: sans-serif;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Hinweis: Wo es unterstützt wird, können Sie die beiden -webkit-text-stroke-*-Deklarationen durch die Kurzschreibweise text-stroke ersetzen, zum Beispiel -webkit-text-stroke: 2px #8ebf42;.

Werte

Wert	Beschreibung
length	Gibt die Stärke des Strichs an.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Welche Aussage über die CSS-Eigenschaft text-stroke-width ist falsch?

Sie kann auf alle Elemente angewendet werden.Sie ist eine animierbare Eigenschaft.Sie gibt die Breite des Strichs an.