Schrift-Konverter
Font Converter
Wandelt TTF und OTF im Browser in WOFF um und zurück und gibt die passende @font-face-Regel aus; WOFF2 braucht Brotli und wird mit Verweis auf Desktop-Werkzeuge abgelehnt.
Wandelt in beide Richtungen zwischen den sfnt-Formaten und WOFF 1.0 um und ermittelt aus der abgelegten Datei, in welche Richtung es geht. Beide Richtungen sind verlustfrei: WOFF ist ein Container, Packen und Entpacken geben also dieselben Tabellen zurück, mit neu berechnetem `head.checkSumAdjustment`, damit das Ergebnis validiert. WOFF2 wird abgelehnt, und die Seite erklärt warum, statt stillschweigend zu scheitern.
TTF · OTF → WOFF, oder WOFF → TTF · OTF
Legen Sie eine Datei ab, die Richtung wird für Sie bestimmt. Alles passiert in diesem Tab.
Was geht und was nicht
- · TTF und OTF ⇄ WOFF 1.0: zlib je Tabelle, mit einem 44 Byte langen Kopf und Verzeichnis, wie es die WOFF-Spezifikation (W3C, 2012) vorgibt. Komprimiert wird mit dem
CompressionStream('deflate')des Browsers, und beim Entpacken wird das sfnt mit den ursprünglichen Prüfsummen neu zusammengesetzt, damithead.checkSumAdjustmentstimmt. Beide Richtungen sind verlustfrei. - · WOFF2 lässt sich weder bauen noch entpacken. Dafür braucht es Brotli, und die Webplattform stellt Brotli einer Seite nicht zur Verfügung. Wenn Sie WOFF2 brauchen, nehmen Sie ein Desktop-Werkzeug — es ist meist noch einmal 20–30 % kleiner als WOFF.
- · TTF ⇄ OTF (CFF), also das Umrissformat zu wechseln, ist ein Neuzeichnen und keine Konvertierung und wird deshalb nicht angeboten. Eine .otf, die innen TrueType ist und nur in der Endung irreführt, wird ganz normal behandelt.
- · Die Lizenz einer Schrift (OS/2 fsType) ändert sich durch die Konvertierung nicht. Prüfen Sie die Vertriebsbedingungen, bevor Sie sie auf einen Server legen.
Für die Größe schlägt das Kürzen auf die benutzten Zeichen die Formatkonvertierung um Längen: der Schrift-Subsetter verkleinert eine Hangul-Schrift um mehr als 90 %, wenn sie auf den Satz von 2.350 Silben reduziert wird.
So funktioniert es
Legen Sie eine Datei ab
Eine TTF oder OTF wird in WOFF gepackt; eine WOFF wird zurück zu TTF oder OTF entpackt, je nachdem, welche Konturen sie enthält. Es gibt keinen Richtungsschalter, weil die Signatur in den ersten vier Bytes schon sagt, in welche Richtung es geht.
Prüfen Sie die Größen vorher und nachher
Nach WOFF nimmt typischerweise 40–50 % weg, und das ist zlib pro Tabelle und nichts Kluges. Wenn es sich kaum rührt, ist die Schrift wahrscheinlich schon komprimierte Daten – eine CFF-Schrift mit vielen gepackten Charstrings zum Beispiel.
Nehmen Sie die Datei und das @font-face
Die Deklaration nimmt an, dass die Datei neben dem Stylesheet liegt, und die Werte für Gewicht und Kursiv werden aus den OS/2- und post-Tabellen der Schrift gelesen und nicht aus dem Dateinamen geraten.
Häufige Fragen
Warum macht es kein WOFF2?
WOFF2 ist Brotli-komprimiert und ordnet und transformiert außerdem die Glyphentabellen um. Die Web-Plattform gibt einer Seite `CompressionStream` nur mit deflate und gzip – es gibt kein Brotli, keine der beiden Richtungen ist also in einem Browser möglich. Auf einem Desktop macht es fonttools (`pyftsubset --flavor=woff2`) oder `woff2_compress`, für ungefähr weitere 20–30 % gegenüber WOFF.
Kann es aus einer TTF eine echte OTF machen?
Nein, und nichts Ehrliches kann das. TrueType verwendet quadratische Kurven und CFF kubische; zwischen ihnen zu wechseln ist eine Kurvenanpassung mit Toleranz, die die Konturen verändert – das ist ein Neuzeichnen der Schrift, keine Umwandlung. Was dieses Werkzeug abdeckt, ist der häufige Fall einer `.otf`, die TrueType-Konturen enthält, wo nur die Endung in die Irre führt.
Brauche ich noch WOFF, oder reicht TTF?
Eine TTF, die der Server mit gzip oder brotli ausliefert, landet nahe bei WOFF, das Format zählt also weniger als früher. WOFF lohnt sich trotzdem: Es komprimiert auch dann, wenn der Server es nicht tut, und jeder Browser, der zählt, unterstützt es seit einem Jahrzehnt. Der bei weitem größere Gewinn ist das Subsetting, nicht der Container.
Ändert die Umwandlung, was die Lizenz erlaubt?
Nein. Der fsType in OS/2 und jeder Namenseintrag kommen unverändert durch, was bedeutet, dass eine Schrift, die Sie nicht einbetten dürfen, auch als WOFF eine Schrift ist, die Sie nicht einbetten dürfen. Prüfen Sie die Vertriebsbedingungen, bevor Sie sie auf einen Server legen; der Inspektor zeigt diese Einträge.
Eingabe aus
Schrift-Inspektor
Font Inspector
Öffnet eine Schriftdatei und zeigt Glyphenabdeckung je Block, Anzahl koreanischer Silben, Strichstärke, variable Achsen, Einbettungsrechte und Lizenz-Namenseinträge.
Schrift-Subsetter
Font Subsetter
Reduziert eine TrueType-Schrift auf die Glyphen, die Ihr Text tatsächlich verwendet, und kann das Ergebnis als WOFF verpacken – der Unterschied zwischen einer 4-MB- und einer 90-KB-Webschrift für Koreanisch.
SVG-Editor mit Erklärung
SVG Editor and Explainer
Bearbeitet ein SVG neben seinem Live-Rendering und erklärt die Datei: viewBox und Skalierung, Transformationen, jeden Pfadbefehl, vererbte Füllung, verschwendete Bytes und was in einem <img>, einer Data-URI oder inline bricht.
Geräte-Mockup
Device Mockup
Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Schrift-Inspektor
Font Inspector
Öffnet eine Schriftdatei und zeigt Glyphenabdeckung je Block, Anzahl koreanischer Silben, Strichstärke, variable Achsen, Einbettungsrechte und Lizenz-Namenseinträge.
Schrift-Subsetter
Font Subsetter
Reduziert eine TrueType-Schrift auf die Glyphen, die Ihr Text tatsächlich verwendet, und kann das Ergebnis als WOFF verpacken – der Unterschied zwischen einer 4-MB- und einer 90-KB-Webschrift für Koreanisch.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.