text-decoration-thickness

Die CSS-Eigenschaft text-decoration-thickness legt die Strichstärke der Dekorationlinie fest, die auf Text in einem Element angewendet wird. Der Wert von text-decoration-line muss entweder underline, line-through oder overline sein, um die Dickeneigenschaft widerzuspiegeln.

.text {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

Syntax

text-decoration-thickness: auto | from-font | <length> | <percentage>

Werte

• auto: (Standard) Ermöglicht dem Browser, eine geeignete Dicke für die Textdekorationslinie festzulegen.
• from-font: Wenn die erste verfügbare Schriftart Metriken mit einer bevorzugten Dicke hat, wird diese Dicke verwendet; andernfalls verhält sie sich wie der Wert auto.
• <length>: Jede gültige Länge mit einer Einheit gibt die Dicke von Textdekorationslinien als feste Länge an. Dies ersetzt alle Informationen in der Schriftart und den Standardwert des Browsers.
• percentage: Gibt die Dicke von Textdekorationslinien als Prozentsatz von 1em in der Schriftart des Elements an.
• initial: Die Standardeinstellung der Eigenschaft, nämlich auto.
• inherit: Übernimmt den Wert der Dekorationsdicke des übergeordneten Elements.
• unset: Entfernt die aktuelle Dicke vom Element.

Demo

Ändern Sie den Wert von text-decoration-thickness in der folgenden Demo, um zu sehen, wie sich die Eigenschaft auf die Textdekoration des Elements auswirkt

Sie ist für Nachkommen konstant

Nachdem ein Element dekoriert wurde, erhalten alle seine Kinder ebenfalls diese Dekoration. Stellen Sie sich nun vor, wir möchten die Dicke der Dekoration für eines der Kinder ändern

p {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-thickness: 0.2em;
}


p span {
  text-decoration-thickness: 0.1em; /* Doesn't work */
}

Dies funktioniert nicht, da die von Elternelementen angegebene Dekorationsdicke nicht überschrieben werden kann. Damit dies funktioniert, muss für das Element selbst eine Dekorationsspezifität festgelegt werden.

p {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-thickness: 0.2em;
}

p span {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-thickness: 0.1em; /* It works! */
}

Prozentsatz und die Kaskade

Für diese Eigenschaft wird eine Länge als fester Wert vererbt und skaliert nicht mit der Schriftart. Eine Prozentangabe hingegen wird als relativer Wert vererbt und skaliert daher mit Änderungen an der Schriftart, wenn sie vererbt wird.

p {
  text-decoration-thickness: 20%;
}


p span {
  font-size: 20px;
  text-decoration-line: underline;
  text-decoration-thickness: inherit; /* = 20% */  
}

Die folgende Demo zeigt den Vergleich zwischen der Verwendung von em- und Prozentwerten bei Vererbung. Wie Sie sehen können, ist der vererbte Wert auf der linken Seite (in der wir em verwenden) eine feste Länge. Das bedeutet, er skaliert nicht mit der Änderung der Schriftart. Auf der rechten Seite hingegen erbt der Text einen relativen Wert (in diesem Fall 20%); daher skaliert die Dicke mit der Änderung der Schriftart.

Obwohl der aktuelle Arbeitsentwurf der Spezifikation auf Prozentwerte für text-decoration-thickness verweist, ist die tatsächliche Unterstützung derzeit auf Firefox beschränkt.

Verwendung mit text-decoration

Der aktuelle Arbeitsentwurf der CSS Text Decoration Module Level 4 specification enthält text-decoration-thickness als Wert in der Kurzschreibweiseigenschaft text-decoration.

.link {
  text-decoration: underline solid green 1px;
}


/* The longhand equivalent */
.link { 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: green,
  text-decoration-thickness: 1px;
}

Während text-decoration gut unterstützt wird, ist die Unterstützung für die Einbeziehung von text-decoration-thickness derzeit auf Firefox beschränkt.

Browser-Unterstützung

Merkmal	IE	Edge	Firefox	Chrome	Safari	Opera
Eigenschaft	Nein	Nein	70	Nein	12.1	Nein
Prozente	Nein	Nein	76	Nein	Nein	Nein
Kurzschreibweise	Nein	Nein	70	Nein	Nein	Nein

Merkmal	Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
Eigenschaft	Nein	Nein	Nein	12.2	Nein
Prozente	Nein	Nein	Nein	Nein	Nein
Kurzschreibweise	Nein	Nein	Nein	Nein	Nein

Notizen

• Die Eigenschaft hieß früher text-decoration-width, wurde aber im Arbeitsentwurf des CSS Text Decoration Module Level 4 specification von 2019 aktualisiert.
• Der Browser muss eine minimale Dicke von 1 Gerätepixel verwenden.

Verwandt