CSS-@font-face-Deklaration aus Schriftdateien erstellen

Geben Sie den Familiennamen, mindestens eine Schriftdatei samt Format sowie Gewicht und Stil an. Das Ergebnis ist deterministisch, direkt kopierbar und bewahrt Ihre Reihenfolge, damit moderne Formate vor Ausweichdateien stehen.

Ordnen Sie die Schriftdateien nach der gewünschten Browserpriorität

Beginnen Sie mit dem öffentlichen Familiennamen, den Ihre Anwendung in der Eigenschaft font-family verwendet. Fügen Sie anschließend jede Quelle als eigenen Datensatz mit Pfad und Formathinweis hinzu. Die Reihenfolge ist wichtig, denn der Browser liest die src-Liste von links nach rechts und wählt die erste unterstützte Ressource. Üblicherweise steht eine kompakte WOFF2-Datei vor einer WOFF-Ausweichdatei. Der Generator erhält diese Reihenfolge unverändert; er sortiert, errät, lädt und untersucht keine Dateien. Als Pfad eignen sich relative URLs wie /fonts/newsreader.woff2 ebenso wie vollständige Ressourcenadressen. Der format-Wert wird als ausdrücklicher CSS-Hinweis ausgegeben und sollte deshalb zur tatsächlichen Datei passen. Anführungszeichen und Rückstriche in Familiennamen, Pfaden und Formaten werden für CSS-Zeichenketten maskiert. Leere Werte und Zeichen, die einen Deskriptor verlassen könnten, werden abgewiesen, anstatt eine scheinbar plausible, aber im Stylesheet fehlerhafte Regel zu erzeugen. Mindestens eine Quelle ist erforderlich, da eine @font-face-Regel ohne brauchbaren src-Deskriptor keine Schrift laden kann.

Stimmen Sie Gewicht und Stil auf die Datei ab

Die Deskriptoren font-weight und font-style teilen dem Browser mit, welche Anfragen dieser Schriftschnitt erfüllen kann. Sie sollten die Daten der Datei beschreiben und nicht einen visuellen Effekt, den der Browser künstlich erzeugen müsste. Für eine normale statische Schrift sind Gewicht 400 und Stil normal üblich. Eine Kursivdatei verwendet häufig dasselbe Gewicht mit italic, eine fette Datei dagegen etwa 700. Variable Schriften können unterstützte Bereiche wie 100 900 verwenden, wenn die Datei diese Achse tatsächlich enthält. Der Generator akzeptiert CSS-Deskriptortext statt einer kurzen Auswahlliste und unterstützt dadurch herkömmliche Werte sowie gültige Syntax für variable Schriften. Äußere Leerzeichen werden entfernt; Zeilenumbrüche, geschweifte Klammern und Semikolons, die den Deskriptor durchbrechen könnten, werden zurückgewiesen. Das Werkzeug prüft nicht, ob die Binärdatei das angegebene Gewicht oder den Stil wirklich enthält. Erstellen Sie für jeden statischen Schnitt eine eigene Regel und verwenden Sie für zusammengehörige Dateien denselben Familiennamen. So kann die normale CSS-Schriftauswahl den passenden Schnitt wählen, ohne dass Sie Deklarationen auf der gesamten Website ändern müssen.

Kopieren Sie das Ergebnis oder erzeugen Sie es im Buildprozess

Die Ausgabe enthält eine formatierte CSS-Regel sowie die normalisierte Familie, die Quellenanzahl, das Gewicht und den Stil. Kopieren Sie den css-Wert vor den Selektoren, die die Familie nutzen, in ein Stylesheet oder rufen Sie den Dienst aus einem Buildskript auf, das Schriftressourcen zusammenstellt. Die erzeugte Regel beschränkt sich bewusst auf Familie, Quellen, Gewicht und Stil. Optionale Eigenschaften wie font-display, unicode-range, size-adjust, ascent-override, descent-override oder Funktionseinstellungen werden nicht geraten, weil sie von Ladestrategie, Glyphenabdeckung und Metrikverträglichkeit abhängen. Ergänzen Sie solche Deskriptoren anschließend nach Bedarf. Das Werkzeug stellt keine Netzwerkanfrage und prüft nicht, ob ein Pfad erreichbar ist. Testen Sie daher das fertige Stylesheet in den unterstützten Browsern und achten Sie im Netzwerkbereich auf fehlende Ressourcen oder falsche MIME-Typen. Die deterministische Serialisierung hilft besonders bei gemeinsam gepflegten Schriften: Gleiche Eingaben liefern dieselbe Ausgabe, die Priorität bleibt prüfbar und leere Quellenlisten scheitern frühzeitig. Die Nutzung im Browser ist kostenlos; eine automatisierte API-Anfrage kostet $0.002.