Convertitore di formati di font
Font Converter
Converte TTF e OTF in WOFF e viceversa dentro il browser e scrive la regola @font-face che serve; il WOFF2 richiede Brotli, non lo fa e ti indirizza a un programma da scrivania.
Converte fra i formati sfnt e il WOFF 1.0 nelle due direzioni, ricavando dal file trascinato quale strada prendere. Entrambe le direzioni sono senza perdite: il WOFF è un contenitore, quindi impacchettare e spacchettare restituisce le stesse tabelle, con `head.checkSumAdjustment` ricalcolato perché il risultato sia valido. Il WOFF2 viene rifiutato, e la pagina spiega perché invece di fallire in silenzio.
TTF · OTF → WOFF, oppure WOFF → TTF · OTF
Trascina un file e la direzione la trova da sé. Tutto avviene in questa scheda.
Cosa funziona e cosa no
- · TTF e OTF ⇄ WOFF 1.0: zlib tabella per tabella, con un’intestazione e un indice di 44 byte, come dice la specifica WOFF (W3C, 2012). A comprimere è il
CompressionStream('deflate')del browser, e in apertura l’sfnt viene rimontato con i checksum originali perchéhead.checkSumAdjustmenttorni giusto. Entrambe le direzioni sono senza perdita. - · WOFF2 non si può né costruire né aprire. Serve Brotli, e la piattaforma web non espone Brotli a una pagina. Se ti serve davvero il WOFF2, usa uno strumento da scrivania: di solito è un altro 20–30% più piccolo del WOFF.
- · TTF ⇄ OTF (CFF), cioè cambiare il formato dei contorni, è un ridisegno e non una conversione, quindi non viene offerto. Un .otf che dentro è TrueType e inganna solo nell’estensione viene trattato normalmente.
- · La licenza di un font (OS/2 fsType) non cambia con la conversione. Controlla le condizioni di distribuzione prima di metterlo su un server.
Per il peso, ridurre un font ai caratteri usati batte di gran lunga il cambio di formato: taglia oltre il 90% di un font hangul quando lo si porta al set di 2.350 sillabe.
Come si usa
Trascinare un file solo
Un TTF o un OTF viene impacchettato in WOFF; un WOFF viene spacchettato di nuovo in TTF o in OTF a seconda dei contorni che contiene. Non c’è un interruttore per la direzione perché la firma nei primi quattro byte dice già da che parte andare.
Controllare le dimensioni prima e dopo
Passare a WOFF toglie di norma il 40–50%, ed è zlib tabella per tabella e niente di più astuto. Se il peso non si muove quasi, il font è probabilmente già fatto di dati compressi: per esempio un font CFF con molte charstring impacchettate.
Prendere il file e l’@font-face
La dichiarazione presuppone che il file stia accanto al foglio di stile, e i valori di peso e corsivo sono letti dalle tabelle OS/2 e post del font invece di essere indovinati dal nome del file.
Domande frequenti
Perché non fa il WOFF2?
Il WOFF2 è compresso con Brotli e per giunta riordina e trasforma le tabelle dei glifi. La piattaforma web dà a una pagina `CompressionStream` con deflate e gzip soltanto: Brotli non c’è, quindi nessuna delle due direzioni è possibile in un browser. Su un computer lo fanno fonttools (`pyftsubset --flavor=woff2`) o `woff2_compress`, per all’incirca un altro 20–30% rispetto al WOFF.
Può trasformare un TTF in un vero OTF?
No, e non può farlo nulla di onesto. Il TrueType usa curve quadratiche e il CFF cubiche; passare dalle une alle altre è un riadattamento delle curve con una tolleranza, che modifica i contorni: è ridisegnare il font, non convertirlo. Quello che questo strumento gestisce è il caso comune di un `.otf` che dentro ha contorni TrueType, dove è solo l’estensione a trarre in inganno.
Il WOFF serve ancora, o il TTF va bene?
Un TTF servito con gzip o brotli dal server arriva vicino al WOFF, quindi il formato conta meno di un tempo. Il WOFF vale comunque la pena: comprime anche quando il server non lo fa, e ogni browser che conti lo supporta da dieci anni. Il guadagno di gran lunga maggiore è il subsetting, non il contenitore.
La conversione cambia quello che la licenza consente?
No. Il fsType di OS/2 e tutti i record dei nomi passano immutati, il che significa che un font che non si può incorporare resta un font che non si può incorporare anche dopo essere diventato un WOFF. Le condizioni di distribuzione vanno controllate prima di metterlo su un server; l’ispettore mostra quei record.
Può ricevere da
Ispettore di font
Font Inspector
Apre un file di font e mostra la copertura dei glifi blocco per blocco, il numero di sillabe hangul, i pesi, gli assi variabili, il permesso di incorporamento e i record di licenza.
Ridurre un font ai caratteri usati
Font Subsetter
Taglia un font TrueType lasciando solo i glifi che il tuo testo usa davvero e può impacchettare il risultato in WOFF: è la differenza fra un webfont da 4 MB e uno da 90 KB.
Editor SVG con spiegazioni
SVG Editor and Explainer
Modifica un SVG accanto alla sua resa dal vivo e spiega il file: viewBox e scalatura, trasformazioni, ogni comando di tracciato, il colore ereditato, i byte sprecati e che cosa si rompe dentro un <img>, in un data URI o in linea.
Mockup su dispositivo
Device Mockup
Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Ispettore di font
Font Inspector
Apre un file di font e mostra la copertura dei glifi blocco per blocco, il numero di sillabe hangul, i pesi, gli assi variabili, il permesso di incorporamento e i record di licenza.
Ridurre un font ai caratteri usati
Font Subsetter
Taglia un font TrueType lasciando solo i glifi che il tuo testo usa davvero e può impacchettare il risultato in WOFF: è la differenza fra un webfont da 4 MB e uno da 90 KB.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.