CSS/Tutorials/Typografie/Schriftformatierung/Darstellung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Schriftformatierung mit CSS

Dieses Tutorial zeigt weitere Eigenschaften zur Schriftformatierung, die Laufweite, Zeichen- und Wortabstand gestalten können.

font-stretch[Bearbeiten]

Mit der Eigenschaft font-stretch können Sie die Laufweite der Schrift, nämlich die Breite der einzelnen Zeichen der verwendeten Schriftart kontrollieren.

Details: caniuse.com

Erlaubt sind dabei folgende Schlüsselwörter:

  • absolute Angaben
    • ultra-condensed, sehr stark gestaucht
    • extra-condensed, stark gestaucht
    • condensed, gestaucht
    • semi-condensed, etwas gestaucht
    • normal, keine Veränderung der Laufweite, Voreinstellung
    • semi-expanded, etwas gestreckt
    • expanded, gestreckt
    • extra-expanded, stark gestreckt
    • ultra-expanded, sehr stark gestreckt
  • relative Angaben
    • narrower, schmaler als im Elternelement
    • wider, breiter als im Elternelement
    • inherit, Laufweite des Elternelements
Beispiel ansehen …
  table  { margin: 1em; border-collapse: collapse; }
  th, td { border: 1px solid; }
  td     { font: 1.6em sans-serif; padding: .3em 1em; }
  .uc    { font-stretch: ultra-condensed; }
  .ec    { font-stretch: extra-condensed; }
  .c     { font-stretch: condensed; }
  .sc    { font-stretch: semi-condensed; }
  .se    { font-stretch: semi-expanded; }
  .e     { font-stretch: expanded; }
  .ee    { font-stretch: extra-expanded; }
  .ue    { font-stretch: ultra-expanded; }
<table> <thead> <tr><th>Schlüsselwort</th><th>Ergebnis</th></tr> </thead> <tbody> <tr><td><code>ultra-condensed</code></td> <td class="uc">mmmmmmmmmm</td></tr> <tr><td><code>extra-condensed</code></td> <td class="ec">mmmmmmmmmm</td></tr> <tr><td><code>condensed</code></td> <td class="c">mmmmmmmmmm</td></tr> <tr><td><code>semi-condensed</code></td> <td class="sc">mmmmmmmmmm</td></tr> <tr><td><code>normal</code></td> <td>mmmmmmmmmm</td></tr> <tr><td><code>semi-expanded</code></td> <td class="se">mmmmmmmmmm</td></tr> <tr><td><code>expanded</code></td> <td class="e">mmmmmmmmmm</td></tr> <tr><td><code>extra-expanded</code></td> <td class="ee">mmmmmmmmmm</td></tr> <tr><td><code>ultra-expanded</code></td> <td class="ue">mmmmmmmmmm</td></tr> </tbody> </table>
ansehen …

Für einen ererbten Wert von font-stretch gelten folgende Regeln:

ererbter Wert gesetzter Wert
narrower wider
Ergebnis
ultra-condensed condensed normal
extra-condensed
condensed
semi- condensed
normal expanded
semi-expanded normal
expanded
extra-expanded
ultra-expanded

Dies kann bedeuten, dass trotz der Angabe wider, die Schriftlaufweite schmaler wird, etwa wenn für das Elternelement font-stretch: extra-expanded; gilt. Ähnliches gilt auch für narrower.

Die Kindelemente ihrerseits vererben den errechneten Wert, nicht etwa narrower oder wider.

Beachten Sie: Eine für ein Element festgelegte Schriftlaufweite wird ohne Ihr Zutun an die Kindelemente vererbt.

letter-spacing[Bearbeiten]

Mit der Eigenschaft letter-spacing können Sie den Zeichenabstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.

Folgende Angaben sind möglich:

  • normal, Standardwert, Zeichenabstand der verwendeten Schriftart, Browser kann Abstände flexibel ändern, um Text im Blocksatz anzuordnen, entspricht letter-spacing: 0;
  • eine Längenangabe, jedoch kein Prozentwert, auch negative Angaben
  • inherit, Zeichenabstand des Elternelements
Beachten Sie: Eine numerische Angabe wird zum Wert für das Schlüsselwort normal dazugerechnet.
  • letter-spacing: 0; bewirkt also nicht, dass die Zeichen aneinanderkleben, sondern dass sie sich wie bei letter-spacing: normal verhalten.
  • letter-spacing: 0.1em; bewirkt analog nicht, daß zwischen den Zeichen genau 0.1em Platz ist, sondern dass zum normalen (letter-spacing: normal;) Zeichenabstand noch 0.1em draufaddiert wird.
Beachten Sie: Ein für ein Element festgelegter Zeichenabstand wird ohne Ihr Zutun an die Kindelemente vererbt.
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>letter-spacing</title>
	<style>

	  p    { letter-spacing: 0.25em; width: 30em; }
	  span { letter-spacing: 1em; color: red; }

	</style>
  </head>
  <body>
    <h1>Abstände zwischen Buchstaben festlegen</h1>
    <p>
      Die Zeichen dieses Textabsatzes haben einen
      <span>zusätzlichen Abstand von 0.25em</span>. Innerhalb der farblich
      hervorgehobenen Span-Elemente sind die
      <span>Abstände zwischen den Buchstaben</span> größer.
    </p>
  </body>
</html>
ansehen …


word-spacing[Bearbeiten]

Mit der Eigenschaft word-spacing können Sie den Abstand zwischen Wörtern im Text bestimmen.

Folgende Angaben sind möglich:

  • eine Längenangabe, jedoch kein Prozentwert, auch negative Angaben
  • normal, Voreinstellung, festgelegt durch die Schriftart bzw. Browsereinstellung, Browser kann Abstände flexibel ändern, um Text im Blocksatz anzuordnen, entspricht word-spacing: 0;
  • inherit, Wortabstand des Elternelements
Beachten Sie: Eine numerische Angabe wird zum Wert für das Schlüsselwort normal dazugerechnet.
  • word-spacing: 0; bewirkt also nicht, dass die Wörter aneinanderkleben, sondern dass sie sich wie bei word-spacing: normal verhalten.
  • word-spacing: 0.1em; bewirkt analog nicht, daß zwischen den Wörtern genau 0.1em Platz ist, sondern dass zum normalen (word-spacing: normal;) Wortabstand noch 0.1em draufaddiert wird.
Beachten Sie: Ein für ein Element festgelegter Zeichenabstand wird ohne Ihr Zutun an die Kindelemente vererbt.
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>word-spacing</title>
    <style>

      p    { word-spacing: 0.5em; width: 30em; }
      span { word-spacing: 2em; color: red; }

    </style>
  </head>
  <body>
    <h1>Abstände zwischen Wörtern festlegen</h1>
    <p>Die Wörter dieses Textabsatzes haben einen
      <span>zusätzlichen Abstand von 0.5em</span>. Innerhalb der farblich
      hervorgehobenen Span-Elemente sind die
      <span>Abstände zwischen den Wörtern</span>
      größer.
    </p>
  </body>
</html>
ansehen …

Siehe auch[Bearbeiten]

Referenz:


Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Typografie/Schriftformatierung/Darstellung&oldid=84759“