CSS letter-spacing-Eigenschaft
Die CSS letter-spacing-Eigenschaft ermöglicht die Angabe der Abstände zwischen Buchstaben/Zeichen in einem Text.
Zu den von letter-spacing unterstützten Werten gehören Werte relativ zum Elternelement (Prozent), schriftartbezogene Werte (em, rem), absolute Werte (px) sowie der Wert normal, der auf die Standardschriftart zurücksetzt.
Die letter-spacing-Eigenschaft unterstützt negative Werte.
Die letter-spacing-Eigenschaft unterstützt Transitionen, sodass sich der Abstand bei einer definierten transition sanft ändert.
INFO
Die Geschwindigkeit der Transition wird durch die animation-timing-function festgelegt.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Ja. |
| Version | CSS1 |
| DOM-Syntax | object.style.letterSpacing = "5px"; |
Syntax
Syntax der CSS letter-spacing-Eigenschaft
letter-spacing: normal | length | initial | inherit;Beispiel für die letter-spacing-Eigenschaft:
Beispiel für die CSS letter-spacing-Eigenschaft mit normalen und negativen Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>Ergebnis
Im obigen Beispiel ist der erste ein normaler Absatz, für den zweiten Absatz wurde letter-spacing auf 4px gesetzt und für den dritten Absatz ein negativer Wert (-4px) festgelegt.
Im folgenden Beispiel wird letter-spacing zusammen mit der transition-Eigenschaft verwendet. Sie müssen mit der Maus über den Text fahren, um die Transition zu sehen.
Beispiel für die letter-spacing-Eigenschaft mit der transition-Eigenschaft:
Beispiel für die CSS letter-spacing-Eigenschaft mit normalen und em-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<div class="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
</p>
<div class="example2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
</div>
</div>
</body>
</html>Zusätzliche Informationen
- Moderne Browser unterstützen vollständig Subpixel-Werte für letter-spacing.
- Die Anwendung von letter-spacing auf Kleinbuchstaben wird im Allgemeinen nicht empfohlen, da sie die Lesbarkeit aufgrund einer ungleichmäßigen visuellen Gewichtung verringern kann.
- Sie können diese Eigenschaft mit CSS transitions animieren.
- Hinweis: Diese Eigenschaft steuert den Abstand zwischen einzelnen Zeichen, im Gegensatz zu
word-spacing, das den Abstand zwischen Wörtern steuert.
Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| normal | Bedeutet, dass keine zusätzlichen Abstände zwischen den Zeichen vorhanden sind. Dies ist der Standardwert dieser Eigenschaft. | Testen » |
| length | Definiert einen zusätzlichen Abstand zwischen den Zeichen. Negative Werte sind erlaubt. | Testen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Practice
Welche Funktion hat die 'letter-spacing'-Eigenschaft in CSS?