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, ein normales, komprimiertes oder erweitertes Schriftschnitt für die im @font-face Regelwerk angegebenen Schriften festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den verschiedenen Stilen der gleichen Schriftfamilie entsprechen, und dann den font-stretch Deskriptor verwenden, um den Stretch des Schriftschnitts explizit anzugeben. Die Werte für den CSS-Deskriptor sind mit denen seines entsprechenden Schrift-Eigenschaftswertes identisch.
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 mit einem der unten aufgeführten Werte beschrieben.
Werte
normal-
Gibt einen normalen Schriftschnitt an.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Gibt einen mehr komprimierten Schriftschnitt als normal an, wobei ultra-condensed der am meisten komprimierte ist.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Gibt einen mehr erweiterten Schriftschnitt als normal an, wobei ultra-expanded der am meisten erweiterte 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 akzeptiert 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 Ähnliches 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 zur Verfügung stellt, das genau mit dem angegebenen Wert übereinstimmt, dann werden Werte unter 100% einem schmaleren Gesicht zugeordnet, und Werte größer oder gleich 100% einem breiteren Gesicht.
Schlüsselwort zu numerische Zuordnung
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 der Streckung mit mehr oder weniger feiner Granularität unterstützen, was dem Designer einen viel genaueren Grad der Kontrolle über das gewählte Gewicht ermöglicht. Dafür sind Prozentsatzbereiche nützlich.
Für TrueType oder OpenType variable Schriften wird die "wdth" Variation verwendet, um verschiedene Glyphenbreiten zu implementieren.
Barrierefreiheit
Personen mit Legasthenie und anderen kognitiven Bedingungen können Schwierigkeiten haben, Schriften zu lesen, die zu stark komprimiert sind, 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 Beispiel findet eine lokale Open Sans-Schrift oder importiert sie und ermöglicht die Verwendung der Schrift für normale, semi-komprimierte und semi-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 |
Browser-Kompatibilität
Loading…