CSS-Eigenschaft letter-spacing

Die CSS-Eigenschaft letter-spacing ermöglicht es, die Abstände zwischen Buchstaben/Zeichen in einem Text zu definieren.

Zu den von letter-spacing unterstützten Werten gehören font-relative Werte (em, rem), parent-relative Werte (Prozentsatz), absolute Werte (px) und die normale Eigenschaft, die auf den Standard der Schrift zurückgesetzt wird.

Die Eigenschaft letter-spacing unterstützt negative Werte.

Die Eigenschaft letter-spacing ist veränderbar, so dass sich der Abstand bei einem definierten Übergang stufenlos ändert.

Die Übergangsgeschwindigkeit wird durch animation-timing-function definiert.

Anfangswert	normal
Gilt für	Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt	Ja
Animierbar	Ja
Version	CSS1
DOM Syntax	object.style.letterSpacing = "5px";

Syntax

letter-spacing: normal | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      letter-spacing: normal;
      }
      .spacing {
      letter-spacing: 4px;
      }
      .spacing-negative { 
      letter-spacing: -4px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Letter-spacing</h2>
    <p>Das ist ein Absatz.</p>
    <p class="spacing">Das ist ein Absatz.</p>
    <p class="spacing-negative">Das ist ein Absatz.</p>
  </body>
</html>

Versuch es selber!

Im angegebenen Beispiel ist der erste ein normaler Absatz, für den zweiten Absatz wird letter-spacing auf 4px und für den dritten Absatz ein negativer Wert (-4px) eingestellt.

Ein weiteres Beispiel, wo letter-spacing mit der Eigenschaft transition verwendet wird. Sie müssen mit der Maus über den Text fahren, um den Übergang zu sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft Letter-spacing</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>

Versuch es selber!

Werte

Wert	Beschreibung
normal	Bedeutet, dass es keine zusätzlichen Leerzeichen zwischen den Zeichen gibt. Es ist der Standardwert dieser Eigenschaft.
length	Definiert einen zusätzlichen Abstand zwischen den Zeichen. Negative Werte sind erlaubt.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.