CSS/Tutorials/Typografie/Schriftformatierung/font-stretch

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft font-stretch können Sie die Breite der einzelnen Zeichen der verwendeten Schriftart kontrollieren.

  • CSS 3.0
  • IE 99
  • Firefox
  • Chrome 4848
  • Safari 1111
  • Opera 3535

Details: caniuse.com

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>

Mit font-stretch können Sie die Laufweite der Schrift verändern. 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

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.


Siehe auch[Bearbeiten]