Fließende Typografie
Lineare CSS Schriftskalierung zwischen zwei Viewport-Breiten generieren.
Eingabewerte
CSS-Clamp-Ausdruck
Der generierte Wert CSS ist ein Startwert. Verwenden Sie nach Möglichkeit relative Texteinheiten und testen Sie Zoom, Textskalierung und Überlauf.
Szenariovergleich
Bis zu drei Snapshots in diesem Tab. Das Laden eines Snapshots ersetzt die aktuellen Eingaben.
Formel
Verwenden Sie m = 100(f₁−f₀)/(v₁−v₀) und b = f₀−mv₀/100. Die Fluidgröße ist clamp(f₀, b + m×vw, f₁); f bezeichnet Schriftgrößen und v Viewportbreiten.
Lineare CSS Schriftskalierung zwischen zwei Viewport-Breiten generieren.
Durchgerechnetes Beispiel
- Minimale Schriftgröße (px)
- 16
- Maximale Schriftgröße (px)
- 24
- Minimale Viewport-Breite (px)
- 400
- Maximale Viewport-Breite (px)
- 1200
- CSS-Clamp-Ausdruck
- clamp(16px, calc(12px + 1vw), 24px)
- Viewport-Koeffizient
- 1 vw
- Pixel-Achsenabschnitt
- 12 px
Anwendungsbereich und Grenzen
Der generierte Wert CSS ist ein Startwert. Verwenden Sie nach Möglichkeit relative Texteinheiten und testen Sie Zoom, Textskalierung und Überlauf.
Eingabewerte werden auf fehlende Werte und zulässige Bereiche geprüft. Ergebnisse außerhalb des endlichen numerischen Bereichs werden nicht angezeigt. Rundungen beeinflussen die Anzeige, die Berechnung verwendet jedoch die numerische Genauigkeit des Modells.
Überprüfen Sie Ihre Einheiten und Annahmen, bevor Sie sich auf ein Ergebnis verlassen. Das Ändern einer Bezeichnung führt nicht zur Umrechnung einer Währung oder physikalischen Einheit.
Formelversion: 174bffea8b3a · Beispiel geprüft: