Rechner für fließende Schriftgrößen

Definieren Sie den Größenübergang

1. Geben Sie kleinere und größere Ansichtsfensterbreiten in CSS Pixeln im Abstand von mindestens 100px sowie die Schriftgröße für jede Breite ein. Die Größen können zunehmen, abnehmen oder konstant bleiben. Geben Sie die angenommenen CSS Pixel pro rem an.
2. Überprüfen Sie die aktuelle Deklaration und Endpunkttabelle. Ändern Sie die Breite des Modelltests, um einen anderen Punkt zu untersuchen. Dadurch wird das Modellexemplar geändert, ohne das kopierte CSS zu ändern oder so zu tun, als wäre die Karte ein Ansichtsfenster.
3. Kopieren Sie CSS und testen Sie es auf einem Nicht-Root-Element auf der Empfangsseite. Es kommt auf die tatsächliche Grundgröße, das Ansichtsfenster, die Schriftart und das Zoomverhalten an. Durch die Verweigerung der Zwischenablage können Sie dieselbe Deklaration manuell auswählen.

Verstehe den Ausdruck

Der Rechner dividiert die font-size-Differenz durch die Ansichtsfensterbreitendifferenz, um eine Steigung zu erhalten. Es multipliziert diese Steigung mit 100 für den vw-Term und konvertiert dann den Offset und die numerischen Größengrenzen unter Verwendung Ihrer angenommenen Wurzel in rem.

Kleiner und größer beschreiben die Breite des Ansichtsfensters, nicht unbedingt die Schriftgröße. Ein abnehmendes Design verwendet einen negativen Ansichtsfensterkoeffizienten mit numerisch geordneten clamp-Grenzen. Gleiche Schriftgrößen führen zu einer einfacheren Konstanten-rem-Deklaration.

Die Koeffizienten werden auf sechs Nachkommastellen gerundet; exakte Halbwerte werden von null weg gerundet. Tabelle und Schriftprobe verwenden die kopierten Koeffizienten und können daher leicht von der idealen Interpolation abweichen. Angezeigte Pixelwerte haben drei Nachkommastellen und kennzeichnen Rundungen.

Die Wurzelgröße ist eine Annahme für die Umrechnung. Eine andere Wurzelgröße auf der Zielseite kann sowohl Schriftgrenzen als auch Übergangsbreiten verändern. rem bezieht sich auf die Dokumentwurzel und vw auf das Ansichtsfenster; Breite oder Schrift eines gewöhnlichen div zu ändern, simuliert beides nicht.

Zunehmende, abnehmende und gerundete Beispiele

Das Standarddesign verwendet 16 Pixel bei einem 320-Pixel-Ansichtsfenster und 32 Pixel bei 1600 Pixel, wobei ein 16-Pixel-Root angenommen wird. Es erzeugt clamp(1rem, calc(0.75rem + 1.25vw), 2rem) mit einer modellierten Größe von genau 24 Pixel bei 960 Pixel.

Das Umkehren dieser Endpunktgrößen ergibt clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Beide Grenzen bleiben numerisch geordnet. Wenn Sie stattdessen 20 Pixel in beiden Breiten eingeben, wird font-size: 1.25rem; unter demselben angenommenen Stamm erzeugt.

Für 17px bei 360px und 23px bei 1280px ergeben die auf sechs Nachkommastellen gerundeten Koeffizienten im kopierten Modell 17,0000024px bei der ersten Breite und 20,0000028px in der Mitte. Die Tabelle rundet diese Werte und behauptet keine exakten Endpunkte.

Autoren- und Modellbeschränkungen

Die Breite des Ansichtsfensters beträgt ganze Zahlen von 240 bis 3840 CSS Pixel mit einem Abstand von mindestens 100px. Die Schriftgrößen betragen 1–256 CSS Pixel und die angenommenen Grundgrößen 8–32 CSS Pixel pro rem, mit bis zu zwei Dezimalstellen. Vorzeichen, Einheiten in Feldern, Gruppierungen, Exponenten und übermäßige Präzision werden abgelehnt und nicht stillschweigend korrigiert.

Das Tool erstellt eine font-size-Deklaration für ein Element außerhalb der Wurzel mit rem und vw. Es importiert kein beliebiges CSS, erstellt keine Schriftgrößenskala, verwendet keine Containereinheiten, lädt keine Schriftarten hoch und ändert keine Wurzelstile. Die Fehlergrenze gilt für das endliche Rechenmodell, nicht für die Rasterung im Browser.

Die Schriftprobe verwendet die berechnete Pixelgröße und wird innerhalb der Karte umgebrochen. Sie simuliert kein Ansichtsfenster und beweist nicht, dass das CSS auf Ihrer Seite dasselbe Ergebnis liefert. Schriftart, Wurzelgröße, Ansichtsfenster und Browsergenauigkeit können das Ergebnis verändern.

Gemischte rem- und Viewport-Einheiten beweisen nicht automatisch, dass eine Textgrößenänderung möglich ist. Testen Sie die Empfangsseite mit Browsertext und Zoomeinstellungen. Das Tool bietet kein universelles WCAG-Abzeichen, kein festes Pixel-Match-Versprechen oder eine garantierte Verdoppelung der Schriftart bei 200 % Zoom.

Lokale numerische Erstellung ohne gespeicherte Einstellungen

Das Tool lädt keine Werte hoch, fordert keine entfernten Schriftarten an, speichert keine Entwürfe, erstellt keine Links mit Einstellungen und fügt keine Telemetrie mit Ihren Werten hinzu. Das Kopieren lösen Sie selbst aus. Bestehende Dienste, Erweiterungen und aufbewahrte Kopien sind nicht von einem allgemeinen Datenschutz- oder Löschversprechen erfasst.