CSS/Eigenschaften/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
  • Leer
  • 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.

Achtung!

Derzeit (Stand Oktober 2015) unterstützen noch nicht alle Browser diese Eigenschaft und auch nicht alle Werte. In manchen Fällen kann letter-spacing als Alternative verwendet werden.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML