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 font-stretch CSS Deskriptor ermöglicht es Autoren, eine normale, schmalere oder erweiterte Schriftart für die im @font-face At-Regel angegebenen Schriften festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-stretch Deskriptor verwenden, um den Dehnungsgrad des Schriftschnitts explizit anzugeben. Die Werte für den CSS-Deskriptor sind die gleichen wie die der entsprechenden Schrift-Eigenschaft.
Syntax
/* 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 font-stretch Eigenschaft wird unter Verwendung eines der unten aufgeführten Werte beschrieben.
Werte
normal-
Spezifiziert einen normalen Schriftschnitt.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Gibt einen schmaleren Schriftschnitt als normal an, wobei ultra-condensed der schmalste ist.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Gibt einen breiteren Schriftschnitt als normal an, wobei ultra-expanded der breiteste ist.
<percentage>-
Ein
<percentage>Wert zwischen 50% und 200% (inklusive). 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 auch einen <percentage>-Wert zu akzeptieren. Dies ermöglicht es variablen 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 bereitstellt, das genau dem angegebenen Wert entspricht, dann werden Werte kleiner als 100% auf ein schmales Schriftbild abgebildet und Werte größer oder gleich 100% auf ein breites Schriftbild.
Schlüsselwort zu numerischer Zuordnung
Die folgende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und numerischen Prozentsätzen:
| 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 Dehnungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer eine viel genauere Kontrolle über das gewählte Gewicht gibt. Dafür sind Prozentbereiche nützlich.
Für TrueType- oder OpenType-Variable Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Glyphenbreiten zu implementieren.
Barrierefreiheit
Menschen mit Legasthenie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten beim Lesen von zu schmalen Schriften haben, insbesondere wenn die Schrift ein niedriges Kontrastverhältnis aufweist.
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
Festlegen eines Prozentsatzbereichs für font-stretch
Das Folgende findet eine lokale Open Sans-Schriftart oder importiert sie und erlaubt die Verwendung der Schriftart für normale, halb kondensierte und halb erweiterte Zustände.
@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 |