Woff Fonts Base di conoscenza | Aspose.Font

Introduzione al carattere Woff

Web Apri Font Formato (WOFF), è un formato file di carattere progettato per l’uso specifico sul Web. È stato sviluppato per superare alcune delle limitazioni e delle sfide dei formati di carattere tradizionali, come TrueType e OpenType, nello sviluppo web.

Il formato Woff ti fornisce:

Ottimizzazione web.
Compatibilità tra browser.
Informazioni sulle licenze e sul copyright incluse direttamente nel file font.
Tipografia migliorata tra cui caratteristiche come ligature, kerning e alternativi stilistici.
Accessibilità al web.

Per utilizzare i caratteri Woff nello sviluppo web, in genere li includi nei file HTML e CSS del progetto utilizzando la regola @font-face.

Vantaggi e svantaggi del carattere Woff

La tabella seguente mostra i pro e i contro dei caratteri Woff, quindi potresti decidere se usarlo nel tuo progetto o meno.

Pro	Contro
I font WOFF sono compressi, il che li rende file di dimensioni inferiori rispetto ad altri formati di font. Questo si traduce in tempi di caricamento più rapidi per le pagine web.	I browser più vecchi potrebbero non supportare completamente questo formato. Questo può rappresentare un problema se è necessario supportare sistemi legacy.
Ampiamente supportato dai principali browser web, il che garantisce un rendering dei font coerente su diverse piattaforme e browser.	Alcuni font commerciali di alta qualità potrebbero richiedere l’acquisto di licenze per essere utilizzati sul web con il formato WOFF.
I font WOFF consentono ai creatori di font di incorporare informazioni su licenza e copyright all’interno del file del font stesso.	I font WOFF potrebbero essere visualizzati in modo diverso su dispositivi o browser diversi a causa dei diversi motori di rendering dei font.
Supporta funzionalità tipografiche avanzate, come legature, crenatura e alternative stilistiche.	Tecniche di ottimizzazione dei font appropriate sono essenziali per tenere sotto controllo le dimensioni dei file.
Può migliorare l’accessibilità web offrendo un maggiore controllo sul rendering dei font, sulla spaziatura e sulle altezze delle righe.
I font WOFF possono essere ospitati sullo stesso dominio della pagina web, riducendo il rischio di vulnerabilità di sicurezza associate alle richieste di font multi-origine.

Dettagli tecnici dei caratteri Woff

Il formato di caratteri aperti Web è progettato specificamente per l’utilizzo del web. Ecco alcuni dettagli tecnici chiave al riguardo:

I caratteri Woff utilizzano le tecniche di compressione per ridurre la dimensione del file rispetto ai file di carattere truetype o opentype.
Includono metadati che forniscono informazioni sul carattere, incluso il suo nome, il copyright e i dettagli delle licenze. È possibile accedere a livello di programmazione, rendendo più semplice la conformità delle licenze di carattere.
I caratteri Woff contengono i dati del carattere necessari per il rendering del testo, tra cui forme di glifo, metriche e altre informazioni relative al carattere. Questi dati sono codificati in un formato che i browser Web possono interpretare.
Può includere informazioni di accensione che vengono utilizzate per migliorare la leggibilità dei caratteri a piccole dimensioni regolando la posizione dei singoli glifi e controllando l’anti-aliasing.
Possono essere sottoinsieme, il che significa che solo una parte dei glifi del carattere è inclusa nel file.
I caratteri WOFF sono in genere serviti con un tipo di carattere/woff o tipo di carattere/woff2 quando richiesto da un server Web. Il tipo MIME aiuta i browser a capire come gestire il file del carattere.
Utilizzando i caratteri WOFF su una pagina Web, gli sviluppatori Web spesso definiscono uno stack di caratteri fallback in CSS per assicurarsi che se il carattere Woff specificato non è disponibile o non si carica, il browser utilizza un sistema predefinito o un altro specificato.
Se i caratteri WOFF sono ospitati su un dominio diverso rispetto alla pagina Web, le intestazioni CORS devono essere impostate sul server dei caratteri per consentire ai browser Web di accedere in modo sicuro ai file di carattere. Questo aiuta a prevenire gli attacchi di falsificazione della richiesta di siti (CSRF).
Oltre al formato Woff originale, esiste un nuovo formato chiamato WOFF2 che offre una compressione ancora migliore e dimensioni di file più piccole rispetto a WOFF, ma potrebbe non essere supportato da tutti i browser più vecchi.
I caratteri Woff possono includere una vasta gamma di caratteri Unicode, in modo che possano visualizzare il testo in più lingue e script.

In che modo i caratteri Woff rendono glifi?

I caratteri del formaggio di caratteri aperti Web rendono glifi in modo simile ad altri formati di carattere. Quando un browser Web o un motore di rendering incontra il contenuto di testo su una pagina Web che richiede un carattere specifico, segue questi passaggi per rendere gli glifi:

Quando viene caricata una pagina Web e specifica l’uso di un particolare carattere tramite CSS (ad es. Fonte-familiare), il browser controlla se ha il carattere richiesto nella sua cache. In caso contrario, avvia una richiesta al server Web che ospita il file font.2.Se il carattere è assente, il browser invia una richiesta al server per il file del carattere WOFF associato alla famiglia dei caratteri specificati.
Dopo aver ricevuto il file del carattere, il browser analizza i dati del carattere WOFF, estraendo informazioni su forme di glifo, metriche, mappatura dei caratteri (mappatura unicode), ecc.
Quando il testo è reso nella pagina Web, il browser mappa ogni carattere nel testo al glifo corrispondente nel carattere in base a Unicode o alle informazioni di codifica.
Il browser utilizza le informazioni su glifi per rendere i singoli caratteri nella pagina Web. Ciò include la determinazione delle dimensioni, della posizione e della spaziatura di ogni glifo rispetto ad altri glifi nel testo.
Per migliorare la qualità visiva del testo e levigare i bordi dei caratteri, il browser può applicare tecniche anti-aliasing alle forme di glifo.
Se ci sono informazioni di kerning e legatura, il browser può regolare la spaziatura tra i caratteri e sostituire combinazioni di carattere specifiche con le legature.
Se il carattere non è disponibile o non viene caricato, il browser utilizza un carattere di sistema predefinito o un altro specificato nello stack del carattere CSS.
Infine, il browser visualizza il testo reso sulla pagina Web, utilizzando gli glifi generati dal carattere Woff.

Woff di Woff2?

	WOFF	WOFF2
Compressione	Utilizza un metodo di compressione basato sulla compressione zlib	Utilizza un algoritmo di compressione più avanzato ed efficiente chiamato Brotli. Questa compressione è altamente efficiente e spesso produce file di font più piccoli del 30-50% rispetto ai loro equivalenti WOFF.
Supporto browser	Offre un buon supporto nei browser web moderni; i browser più vecchi potrebbero offrire un supporto limitato o nullo per questo formato.	Offre un supporto più ampio tra i browser moderni.
Dimensioni file	Sono compressi e più piccoli dei formati di font raw, ma le dimensioni dei file possono comunque essere relativamente grandi.	In genere sono molto più piccoli sia dei formati WOFF che dei formati di font raw originali.
Prestazioni	Offrono prestazioni migliori rispetto ai formati di font grezzi grazie alle dimensioni ridotte dei file e alla distribuzione ottimizzata.	Offrono prestazioni web superiori riducendo significativamente il tempo necessario per scaricare i file dei font.

Come creare un carattere Woff?

La creazione di un carattere Web Font Font Font (WOFF) prevede la conversione di altri formati di carattere in formato WOFF. Ecco i passaggi del processo:

Ottieni un carattere TTF o OTF. È possibile creare il tuo carattere utilizzando il software di progettazione di caratteri o utilizzare un carattere esistente per cui hai i diritti di licenza appropriati.
Assicurati che il tuo file di carattere sia ben progettato e privo di errori.
Converti in Woff.
Prima di utilizzare il carattere WOFF sul tuo sito Web, testare il carattere e Risolvi i problemi se trovati.
Ospita il file di font Woff sul tuo server Web o una rete di consegna dei contenuti (CDN) in modo che sia possibile accedervi dal tuo sito Web. Assicurati di impostare il tipo MIME appropriato per i file WOFF, che in genere è font/woff.
Utilizzare il carattere WOFF in CSS con la regola della faccia di font @ che definisce il carattere WOFF e specifica la sua fonte usando la proprietà SRC. Ecco un esempio:

1    @font-face { 
2        Font-Family: "yourfontName"; 
3        src: url ('path/to/your-font.woff') formato ('woff'); 
4    }

Applicare il carattere su specifici elementi HTML utilizzando la proprietà del carattere familiare nel tuo CSS.

1    body { 
2        Font-Family: 'YourfontName', sans-serif; 
3    }

Assicurati di avere i diritti di licenza appropriati per il carattere che stai utilizzando sul tuo sito Web, soprattutto se si tratta di un carattere commerciale.

Come ottimizzare i file Woff?

Ottimizzare i caratteri WOFF (Web Open Font Format) è essenziale per migliorare le prestazioni Web riducendo la dimensione del file dei caratteri mantenendo la tipografia di alta qualità. Ecco il modo in cui puoi farlo:

Sotto sottolineare il carattere ti assicura di includere solo i personaggi necessari per il tuo sito Web. Ciò non solo ridurrà la dimensione del file, ma ti aiuterà a gestirla più facilmente.
Scopri se hai davvero bisogno di suggerimenti e kerning nel tuo carattere poiché ciò aumenta la dimensione del file. Alcuni caratteri possono funzionare bene senza accennare e kerning, specialmente a dimensioni più grandi.
Ottimizza gli i glifi rivedendo i loro contorni e rimuovendo eventuali punti o curve non necessari mantenendo la qualità visiva. Il software di modifica dei caratteri può aiutare con questa ottimizzazione.
Compreare i file dei caratteri Woff utilizzando strumenti come GZIP o BROTLI sul tuo server Web per ridurre le dimensioni del file quando si servono i caratteri sul browser.
Implementare le intestazioni di memorizzazione nella cache corretta sul tuo server Web per garantire che i caratteri siano memorizzati nella cache dal browser e impediscano un inutile ri-caricamento dei caratteri nelle successive visite al tuo sito Web.6.Utilizzare una rete di consegna di contenuti (CDN) che spesso ha meccanismi ottimizzati di memorizzazione nella cache e di consegna che possono migliorare i tempi di caricamento dei caratteri.
Prova a utilizzare l’attributo Preload nell’HTML per caricare i caratteri critici all’inizio del processo di caricamento della pagina per ridurre i ritardi di blocco del rendering correlati al carattere.
Utilizzare la proprietà CSS a display carattere per controllare il modo in cui il caricamento viene visualizzato i caratteri.
Utilizzare tecniche di tipografia reattive per caricare diverse varianti di carattere in base alle dimensioni e alla risoluzione dello schermo. Avere query multimediali per caricare diversi file di carattere per dispositivi e dimensioni dello schermo diverse.
Avere il numero di caratteri che usi sul tuo sito limitato perché ogni carattere aggiuntivo aggiunge alla dimensione complessiva del file.
Evita di applicare personalizzazioni di caratteri eccessive (ad es. Peso e stili di carattere multipli) se non sono essenziali per il tuo design.
Testa regolarmente le prestazioni del tuo sito Web utilizzando strumenti come Google PagesPeed Insights o GTMETRIX per identificare i problemi di prestazioni relativi ai caratteri.

Standard e specifiche W3C (World Wide Web Consortium) in relazione ai caratteri Woff.

Il W3C è responsabile dello sviluppo e del mantenimento di vari standard e specifiche relativi alle tecnologie Web, compresi i caratteri. Uno standard importante relativo ai caratteri sul Web è il Web Apri Font Formato (WOFF). WOFF è un formato di carattere che è specificamente progettato per l’uso sul Web e fornisce un modo per impacchettare i caratteri per la consegna e l’uso efficienti sulle pagine Web. Ecco alcuni punti chiave W3C:

WOFF 1.0 (FORMATO DI FONT OPEN Web 1.0):

Il formato Woff originale introdotto da W3C.
Fornisce un modo per impacchettare i dati dei caratteri da utilizzare sul Web, ottimizzando le dimensioni del file e i tempi di caricamento.
Supporta i dati dei caratteri TrueType e OpenType.
Pubblicato come raccomandazione W3C il 3 dicembre 2012.

Woff 2.0 (Web Apri Font Formato 2.0):

Una versione aggiornata del formato WOFF con compressione migliorata e altri miglioramenti.
Offre rapporti di compressione migliori rispetto a WOFF 1.0, risultando in file di dimensioni più piccole.
Supporta anche i dati dei caratteri TrueType e OpenType.
Pubblicato come raccomandazione W3C il 18 agosto 2016.

Formato file Woff (bozza di lavoro):

Il lavoro in corso di W3C sulla specifica dei dettagli tecnici del formato del file WOFF.
Fornisce informazioni sulla struttura dei file WOFF, inclusi metadati e dati font.
Aiuta gli implementatori e gli sviluppatori a capire come creare e utilizzare i caratteri Woff in modo efficace.

Gruppo di lavoro dei caratteri Web:

Web Fonts Working Group è responsabile dello sviluppo e del mantenimento di standard relativi ai caratteri Web, incluso WOFF.
Il lavoro del gruppo include affrontare i problemi di caricamento e rendering dei caratteri, ottimizzare la consegna dei caratteri e migliorare la sicurezza dei caratteri sul Web.

Fonts CSS Modulo Livello 3:

Questa specifica CSS definisce come i caratteri vengono referenziati e utilizzati nei fogli di stile CSS.
Fornisce la regola @font-face, che consente agli sviluppatori Web di specificare i caratteri personalizzati per gli elementi della pagina Web, incluso l’uso dei caratteri WOFF

Conclusione

Lo sviluppo e l’uso dei caratteri Web Font Font Font (WOFF) hanno migliorato significativamente il processo di tipografia Web. Questo versatile formato di carattere ha autorizzato i web designer e gli sviluppatori di offrire esperienze tipografiche più creative e accessibili agli utenti su Internet.

WOFF offre una serie di vantaggi, tra cui una compressione efficiente per tempi di caricamento delle pagine più veloci, una migliore compatibilità tra browser e la possibilità di includere caratteri tipografici personalizzati senza perdere le prestazioni del sito Web. Sono diventati parte integrante del web design e sono ancora molto popolari e supportati.

Fonti SVG Caratteri CFF