Elysia Tools
Mobile Navigation
Workflow Playbook
Zeichenvorrat prüfen, Überschrift und Fließtext mit echten Inhalten vergleichen, variable Achsen einstellen und responsives CSS samt Ersatzschriften verifizieren.
Themen
Dieser Ablauf liefert eine Typografieübergabe für eine mehrsprachige Webseite. Sammeln Sie eine lange Überschrift, einen Absatz, Beträge, Namen mit Akzenten und sprachtypische Satzzeichen. font-file-inspector untersucht eigene Dateien; halten Sie Version und benötigte Stärken mit dem Zeichenvorrat fest. Die Abdeckung eines Unicode-Blocks beweist nicht, dass jedes Zeichen oder jede Formungssequenz funktioniert. Dokumentieren Sie die freigegebene Quelle und prüfen Sie die Nutzungsbedingungen separat. Unerwartete oder unsichtbare Codepunkte gehören in unicode-emoji-debugging.
webfont-pairing-lab lädt die Google-Fonts-Familien seines Katalogs und erzeugt einen Import für gewählte Stärken. Für eigene Schriften verwenden Sie font-pairing-preview-card, nachdem die Hostseite die Datei geladen hat. Die Karte lädt nichts anhand eines Namens. Eine ansprechende Vorschau könnte daher eine lokale Ersatzschrift zeigen; kontrollieren Sie die tatsächlich gerenderte Schrift auf der Zielseite. Vergleichen Sie immer denselben Text und verändern Sie gezielt Größe und Zeilenhöhe. Lange Überschriften machen zu enge Umbrüche sichtbar.
Bei vorhandenen fvar-Achsen zeigt variable-font-axis-instance-and-css-font-variation-settings-builder benannte Instanzen und erlaubte Koordinaten. Verwenden Sie passende übergeordnete CSS-Eigenschaften und ersetzen Sie Vorschauverweise durch die bereitgestellte Datei-URL. Für statische Familien dokumentieren Sie die Datei jeder Stärke. Vom Browser erzeugtes Fett beweist nicht, dass die richtige Datei geladen wurde. Speichern Sie Dateiversion, Schriftfolge und Koordinaten gemeinsam, damit die Auswahl reproduzierbar bleibt.
Berechnen Sie mit css-fluid-typography-clamp-calc die Größen zwischen vereinbarten Ansichtsbreiten. Testen Sie das angewandte CSS an beiden Grenzen und dazwischen. Erhöhen Sie den Zoom und blockieren Sie das Laden der Schrift, um Umbrüche, Schaltflächen und abgeschnittene Zeilen zu prüfen. Die Übergabe enthält CSS, Quellen, Sprachproben, getestete Breiten und offene Fehler. Für widersprüchliche Regeln nutzen Sie css-authoring-layout-and-cascade-workflows; die vollständige Barrierefreiheitsprüfung folgt in web-accessibility-audits.
Workflow-Leitfaden
Metadaten, Stilmerkmale, Unicode-Abdeckung und Achsen untersuchen und benötigte Ersatzzeichen anhand echter Texte notieren.
Gehostete Familien im Labor oder geladene CSS-Schriftfolgen in der Karte vergleichen; Inhalt konstant halten und Stärken sowie Zeilenhöhen abstimmen.
Instanzen und Grenzen prüfen, Koordinaten ansehen und CSS exportieren. Bei statischen Schriften stattdessen passende Dateien festhalten.
clamp für vereinbarte Breiten berechnen, CSS anwenden und gerenderte Schrift, Umbrüche, Zoom und Ersatz manuell prüfen.
Das Labor nutzt seinen Google-Fonts-Katalog, der Inspektor eigene Dateien. Ein Familienname in der Vorschaukarte lädt keine Schriftdatei.
Den Achseneditor nur bei vorhandenen fvar-Achsen einsetzen; statische Schriften benötigen passende Dateien für die Stärken.
Zeichenabdeckung und tatsächlichen Ersatz prüfen; verdächtige Codepunkte mit unicode-emoji-debugging untersuchen.