DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die font-stretch Eigenschaft, eingeführt in CSS3, wählt eine normale, komprimierte oder erweiterte Schriftart aus einem Schriftsatz.
Um font-stretch verwenden zu können und ein Ergebnis zu sehen, muss die verwendete Schriftart eine Schriftlage aufweisen, die dem angegebenen Wert entspricht. Mit anderen Worten, font-stretch funktioniert nicht mit jeder beliebigen Schriftart, sondern nur mit Schriften, die mit unterschiedlichen Lagen gestaltet sind, die den definierten Größen entsprechen.
p {
font-stretch: ultra-condensed;
}font-stretch akzeptiert einen der folgenden Werte
ultra-komprimiertextra-komprimiertkomprimierthalbfett-komprimiertnormalhalbfett-erweiterterweitertextra-erweitertultra-erweitert
Wenn eine bestimmte Schriftart nicht alle dargestellten Lagen aufweist, wird jeder verwendete Wert der nächstgelegenen entsprechenden Lage zugeordnet. Normale oder komprimierte Werte werden einer schmaleren Schriftart zugeordnet und erweiterte Werte einer breiteren Schriftart oder andernfalls der nächstgelegenen schmaleren Schriftart.
In unterstützenden Browsern kann font-stretch als Teil der font Kurzschrifteigenschaft verwendet werden.
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| none | none | 9+ | none | 9+ | none | none |
Hallo, ich habe das bei w3 nachgeschlagen und es heißt, dass es in keinem Browser unterstützt wird. Ich weiß nicht, wer Recht hat, aber ich habe nicht bemerkt, dass der „Versuch es“-Testcode von w3 in Firefox oder IE funktioniert... und beide sind höher als 9.
Hallo Carine. Lies den 2. Absatz in diesem Artikel und du wirst sehen, warum es nicht funktionierte. Die Schriftart selbst muss es unterstützen, zusammen mit dem Browser. Nur weil der Browser es unterstützt, bedeutet das nicht, dass dies funktionieren wird. Es ist eine seltsame Sache mit Schriftarten und bestimmten Eigenschaften, aber so ist es nun mal.
Beachte auch, dass „w3schools“ nichts mit „w3c“ zu tun hat (was die richtige Organisation ist). W3schools ist in Ordnung, um die Grundlagen zu lernen, aber sie haben keine Autorität als Standardisierungsgremium oder Ähnliches.
Oh, okay... Danke. Ich hatte mich gefragt, wo die Regeln waren... Ich weiß, es gab Ressourcen auf w3 schools und Mozilla, aber ich kannte nie die offizielle. Danke nochmals.
Verwende einen span-Tag, schreibe deinen gewünschten Text im span-Tag und setze die span-Eigenschaften wie folgt in style/CSS
span {
transform:scale(3,1);
-webkit-transform:scale(3,1);
display:inline-block;
}
Keine zusätzlichen oder größeren Schriftarten nötig – genial!
Meine Güte, mein Leben ist gut dank euch.
Browserunterstützung beinhaltet jetzt
Chrome 48+
Opera 35+
Android 50+
Leider kein iOS und Safari