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.

Elysia Tools

Mobile Navigation

Design

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.

Einzelheiten

Wobei dieses Tool hilft

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.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Beispiele

Beispiele zu diesem Tool

Verwandt

Achsen- und Instanz-Baukasten für Variable Fonts und CSS font-variation-settings

Wobei dieses Tool hilft

Dieses Tool ausführen

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Prüfung und CSS-Erstellung für eine Standard-Variable-Font

2. Inspektion einer parametrischen Schrift mit vielen Achsen

FAQ

Variable Schriftarten Beispiele

Bulma CSS Framework Beispiele

CSS-Selektor-Beispiele

Code-Beispiele mit Ungültigen Variablennamen

PDF-Strikethrough-Review-Extraktor

Read-Along-Cue-Generator

Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)

Bild-Palette zu Design-Tokens