font-stretch

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Der CSS-Deskriptor font-stretch ermöglicht es Autoren, ein normales, komprimiertes oder erweitertes Schriftbild für die in der @font-face-Regel @font-face angegebenen Schriftarten festzulegen.

Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftarten herunterladen, die den verschiedenen Stilen derselben Schriftfamilie entsprechen, und dann den Deskriptor font-stretch verwenden, um explizit den Streckgrad des Schriftbildes festzulegen. Die Werte für den CSS-Deskriptor sind dieselben wie für die entsprechende Schrift-Eigenschaft.

Syntax

css

/* Single values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* multiple values */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;

Die Eigenschaft font-stretch wird mit einem der nachfolgend aufgeführten Werte beschrieben.

Werte

normal: Gibt ein normales Schriftbild an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt ein komprimierteres Schriftbild als normal an, wobei ultra-condensed die am stärksten komprimierte Version ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt ein erweitertes Schriftbild als normal an, wobei ultra-expanded die am stärksten erweiterte Version ist.
<percentage>: Ein <percentage>-Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht erlaubt.

In früheren Versionen der font-stretch Spezifikation akzeptierte die Eigenschaft nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, um einen <percentage>-Wert zu akzeptieren. Dies ermöglicht es veränderlichen Schriften, etwas mehr wie ein Kontinuum von Zeichenbreiten anzubieten. Für TrueType- oder OpenType-Variable-Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Breiten zu implementieren.

Wenn die Schriftart kein Gesicht bietet, das genau dem gegebenen Wert entspricht, dann werden Werte unter 100% mit einem schmaleren und Werte ab 100% mit einem breiteren Gesicht abgebildet.

Schlüsselwort-zu-Zahlen Mapping

Die folgende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und numerischen Prozentwerten:

Schlüsselwort	Prozentsatz
`ultra-condensed`	50%
`extra-condensed`	62,5%
`condensed`	75%
`semi-condensed`	87,5%
`normal`	100%
`semi-expanded`	112,5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

Variable Schriften

Die meisten Schriften haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Einige Schriften, sogenannte variable Schriften, können jedoch einen Bereich von Streckungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer eine viel genauere Kontrolle über das gewählte Gewicht gibt. Für diese sind Prozentbereich nützlich.

Für TrueType- oder OpenType-Variable-Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Glyphenbreiten zu implementieren.

Barrierefreiheit

Personen mit Dyslexie und anderen kognitiven Beeinträchtigungen könnten Schwierigkeiten haben, Schriften zu lesen, die zu komprimiert sind, besonders wenn die Schrift ein niedriges Kontrastverhältnis hat.

Formale Definition

Zugehörige @-Regel	`@font-face`
Anfangswert	`normal`
Berechneter Wert	wie angegeben

Formale Syntax

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

Beispiele

Einstellen eines Prozentbereichs für font-stretch

Das folgende Beispiel sucht eine lokale Open Sans Schriftart oder importiert sie und erlaubt die Verwendung der Schriftart für normale, halb komprimierte und halb erweiterte Zustände.

css

@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-prop-desc