# Achsen- und Instanz-Baukasten für Variable Fonts und CSS font-variation-settings Lade eine Variable Font (TTF/OTF/WOFF/WOFF2) hoch, um ihre fvar-Achsen und benannten Instanzen zu prüfen, die Interpolation live im Browser voranzusehen und ein kopierfertiges font-variation-settings-CSS samt hochwertiger Ersatzproperties und variablem @font-face-Block zu erzeugen. > Kanonische Seite: https://elysiatools.com/de/tools/variable-font-axis-instance-and-css-font-variation-settings-builder - **Kategorie:** Design - **Schlagwörter:** Variable Font, fvar-Achsen, benannte Instanzen, css font-variation-settings, Vorschau Variable Font, woff2 prüfen ## Überblick Liest die OpenType-fvar-Tabelle (Achsen mit min/Standard/max sowie benannte Instanzen) über opentype.js; WOFF2 wird durch den WebAssembly-Port wawoff2 entpackt. Die CSS-Erzeugung folgt CSS Fonts Level 4 §8.2: Achsen-Tags sind case-sensitiv, Wiederholungen übernehmen den letzten Wert, und die ausgegebene Liste wird wie der spezifizierte berechnete Wert dedupliziert und aufsteigend nach Code-Einheiten sortiert. Existieren hochwertige Ersatz-Properties (wght→font-weight, wdth→font-width, slnt/ital→font-style mit negiertem Winkel, opsz→font-optical-sizing), werden sie als empfohlene Variante ausgegeben. Die Vorschau bettet die Schrift als data-URI-@font-face ein, zeigt die Extreme jeder Achse, alle benannten Instanzen, deine eigenen Koordinaten und einen Slider-Playground, der das CSS live ausdruckt. ## Eingaben - **Schriftdatei** (file): Upload a variable font (.ttf / .otf / .woff / .woff2) - **Achsenwerte** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults - **Vorschautext** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→" ## Wann verwenden - Wenn die genauen Achsen-Grenzwerte (min, default, max) oder benannte Schnitte einer variablen Schriftdatei analysiert werden müssen. - Wenn feingestimmte Schriftachsen (z. B. wght, wdth, opsz) interaktiv getestet und als standardkonformes CSS exportiert werden sollen. - Wenn geprüft werden soll, welche High-Level-CSS-Eigenschaften (wie font-weight oder font-width) anstelle von font-variation-settings empfohlen sind. ## Funktionsweise - Die hochgeladene Schriftdatei wird analysiert (WOFF2 via WebAssembly entpackt, fvar-Tabellen via opentype.js eingelesen), um alle Achsen und Instanzen zu extrahieren. - Eingegebene Achsenparameter werden validiert, dedupliziert und nach CSS Fonts Level 4 §8.2 lexikografisch sortiert. - Die Schrift wird als data-URI im Browser eingebunden, um die Interpolation auf benutzerdefinierten Texten live über Schieberegler darzustellen. - Das Tool generiert sofort kopierbaren CSS-Code mit font-variation-settings, passenden High-Level-Eigenschaften und einem @font-face-Block. ## Anwendungsfälle - Ermittlung und Dokumentation aller verfügbaren Achsen und vordefinierten Instanzen einer gelieferten Variable Font. - Generierung von präzisem CSS für typografische Zwischenschnitte in responsiven Web-Layouts. - Vergleich und Live-Vorschau von Glyphenformen bei extremen Achseneinstellungen vor dem Web-Rollout. ## Häufig gestellte Fragen ### Welche Schriftformate werden unterstützt? Das Tool unterstützt variable Schriften in den Formaten TTF, OTF, WOFF und WOFF2 bis zu einer Dateigröße von 15 MB. ### Warum werden Eigenschaften wie font-weight anstelle von font-variation-settings empfohlen? CSS Fonts Level 4 empfiehlt High-Level-Properties wie font-weight, font-width oder font-style, da Browser damit Schriftmerkmale wie Vererbung und Fallbacks semantisch sauberer handhaben. ### Werden meine Schriftdateien auf einen Server hochgeladen? Nein, das Auslesen der Schriftdateien und das Rendern der Vorschau erfolgen vollständig lokal in Ihrem Webbrowser. ### Wie werden doppelte Achsen-Tags im CSS-Generator behandelt? Gemäß CSS-Spezifikation überschreibt der zuletzt genannte Wert vorangehende Angaben desselben Tags, und die Ausgabe wird dedupliziert sortiert. ### Wie wird die Neigungsachse slnt in CSS font-style umgerechnet? Der Winkel der slnt-Achse wird für die CSS-Eigenschaft font-style: oblique negiert, da Schriftdesigner und CSS entgegengesetzte Vorzeichenkonventionen nutzen. ## Ähnliche Tools - [PDF-Strikethrough-Review-Extraktor](https://elysiatools.com/de/tools/pdf-strikethrough-review-extractor): Erkennt durchgestrichenen Text in Review-PDFs und erstellt Berichte fuer Vertrage und Revisionen - [Read-Along-Cue-Generator](https://elysiatools.com/de/tools/audio-read-along-cue-generator): Erstellt Satz- oder Wort-Level-Cues mit Zeitstempel aus Narrations-Audio und Skript für Karaoke-Lesen. - [Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/de/tools/font-file-inspector): Lade eine TTF-, OTF-, WOFF- oder WOFF2-Datei hoch (WOFF2 wird automatisch dekomprimiert) und prüfe alle Metadaten: Familie/Subfamilie/Designer/Copyright/Version, Glyphenanzahl, unitsPerEm, Strichstärke und Breite, Kursivwinkel, Stilflags und Bounding-Box; Heatmap der Unicode-Blockabdeckung; SVG-Glyphenvorschau (eigener Text, Auto-Stichprobe für Icon-Fonts); liga-Ligaturen und OpenType-Features; fvar-Achsen und benannte Instanzen variabler Fonts. - [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala - [VP8-Bildanalysator](https://elysiatools.com/de/tools/vp8-image-analyzer): Analysiert WebP/VP8-Bilder mit Sharp, erzeugt eine Graustufen-Displacement-Map und rendert ein 3D-Relief mit Three.js - [CSS-Fluid-Typography-Clamp-Rechner](https://elysiatools.com/de/tools/css-fluid-typography-clamp-calc): Gibt minimale und maximale Viewport- und Schriftgroessen ein und erzeugt clamp(), kopierbares CSS und Vorschaudaten - [CSV-zu-Datenbank-Migrationsplaner](https://elysiatools.com/de/tools/csv-to-database-migration-planner): Leitet aus CSV-Daten ein relationales Schema ab und erzeugt CREATE-TABLE- und ALTER-Plaene fuer PostgreSQL, MySQL, SQLite oder SQL Server - [Bildsteganographie: Einbetten & Erkennen](https://elysiatools.com/de/tools/image-steganography-embed-detect): Versteckt Text in den niederwertigsten Bits eines PNG, liest ihn zurück und führt die Chi-Quadrat-Stegoanalyse nach Westfeld–Pfitzmann mit gleitender p-Kurve und LSB-Ebenen-Vorschau aus. ## Beispiele - [Variable Schriftarten Beispiele](https://elysiatools.com/de/samples/variable-font-samples): Variable Schriftartdateien mit fvar-Achsen für den Achsen/Instanzen-Inspektor und CSS-Builder - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests - [Code-Beispiele mit Ungültigen Variablennamen](https://elysiatools.com/de/samples/code-invalid-variable-names-samples): Code-Beispieldateien, die ungültige Variablenbenennungskonventionen in verschiedenen Programmiersprachen demonstrieren