Perché dovremmo includere ttf, eot, woff, svg, ... in una faccia di carattere

299

In CSS3 font-face , ci sono più tipi di font inclusi come ttf, eot, woff, svge cff.

Perché dovremmo usare tutti questi tipi?

Se sono speciali per diversi browser, perché il numero di essi è maggiore del numero dei principali browser Web?

css font-face webfonts

— user16948
fonte

Risposte:

425

Risposta nel 2019:

Utilizzare solo WOFF2 o, se è necessario il supporto legacy, WOFF. Non utilizzare altri formati

( svge eotsono formati obsoleti ttfe otfsono caratteri di sistema completi e non devono essere utilizzati per scopi Web)

Risposta originale del 2012:

In breve, font-face è molto vecchio, ma solo recentemente è stato supportato da più di IE.

eot è necessario per Internet Explorer più vecchi di IE9: hanno inventato le specifiche, ma eot era una soluzione proprietaria.
ttfe otfsono normali caratteri vecchi, quindi alcune persone si sono infastidite dal fatto che ciò significa che chiunque può scaricare gratuitamente caratteri costosi su licenza.
Il tempo passa, SVG 1.1 aggiunge un capitolo "font" che spiega come modellare un font usando esclusivamente il markup SVG e le persone iniziano a usarlo. Passa più tempo e si scopre che sono assolutamente terribili rispetto a un normale formato di carattere e SVG 2 rimuove saggiamente di nuovo l'intero capitolo.
Quindi, woffviene inventato da persone con un po 'di conoscenza del dominio, il che rende possibile l'hosting dei caratteri in un modo che elimina bit che sono di fondamentale importanza per l'installazione del sistema, ma irrilevanti per il web (rendendo felici le persone preoccupate per la pirateria) e consente la compressione interna per soddisfare meglio le esigenze del web (rendere felici utenti e host). Questo diventa il formato preferito.
Modifica 2019 Alcuni anni dopo, woff2viene redatto e accettato, il che migliora la compressione, portando a file ancora più piccoli, insieme alla possibilità di caricare un singolo carattere "in parti" in modo che un carattere che supporti 20 script possa essere memorizzato come "blocchi "su disco invece, con i browser in grado di caricare automaticamente il carattere" in parti "secondo necessità, anziché dover trasferire l'intero carattere in primo piano, migliorando ulteriormente l'esperienza di composizione.

Se non vuoi supportare IE 8 e versioni precedenti, iOS 4 e versioni precedenti e Android 4.3 o versioni precedenti, puoi semplicemente utilizzare WOFF (e WOFF2, un WOFF più compresso, per i browser più recenti che lo supportano).

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Il supporto per woffpuò essere verificato su http://caniuse.com/woff
Il supporto per woff2può essere verificato su http://caniuse.com/woff2

— Rich Bradshaw
fonte

iOS 5 supporta WOFF.

— Rob,

woff... ha una modalità che impedisce alle persone di piratare il carattere ? Come mai può / funziona?

— Mark Amery,

Il TTF non dovrebbe essere più leggero di WOFF. WOFF è una forma compressa di TrueType - font OpenType (ttf e otf).

— toto_tico,

Il punto di WOFF non è l'antipirateria. TypeKit afferma che "i due vantaggi principali che i caratteri OpenType / CFF hanno sui caratteri TrueType sono 1) le loro dimensioni di file più piccole e che 2) richiedono informazioni di suggerimento molto meno per rendere bene in ambienti che consentono una qualche forma di anti-aliasing. "

— Michael McGinnis,

Gli strumenti di @Zelphir rendono difficile la creazione di caratteri incorporabili con quella bandiera, e il tuo progettista scappatoia è analfabeta di programmazione e potrebbe rimuovere la bandiera solo se qualcuno progettasse un'app Mac con un pulsante lucido "carattere pirata". Inoltre, se si tratta di una società, è possibile presentare spese legali. Se sono dei tipi con un blog, parlano con loro, non ci riescono, il loro host, ecc., Ma tieni presente che le persone che non possono acquistare il tuo carattere non sono comunque potenziali clienti, quindi direi che la pubblicità gratuita vale di più della seccatura di convincerli a scambiarlo con la cosa più vicina su dafont.

— Camilo Martin,

Woff è una forma compressa (zippata) del carattere TrueType - OpenType. È piccolo e può essere consegnato sulla rete come un file grafico. Ancora più importante, in questo modo il carattere viene preservato completamente includendo le tabelle delle regole di rendering di cui pochissime persone si preoccupano perché usano solo caratteri latini.

Dai un'occhiata a [URL morto rimosso]. Il carattere che vedi è uno smartfont (woff) distribuito sul web sperimentale che ha migliaia di personaggi combinati che formano forme complesse. Il testo sottostante è un semplice codice latino del singalese romanizzato. (Copia e incolla nel Blocco note e vedi).

Solo woff può farlo perché nessuno ha questo carattere e tuttavia è visto ovunque (Mac, Win, Linux e persino su smartphone da tutti i browser tranne che da IE. IE non ha il pieno supporto per i tipi aperti).

— user2422970
fonte

Non vedo nulla di speciale su quel sito. Se lo copio in un editor (ha il supporto utf8) vedo ancora solo testo normale. Cosa fa esattamente quel woff?

— Zelphir Kaltstahl,

Due terzi di questa risposta sono sbagliati o irrilevanti. Anche quel collegamento è rotto.

— Yay295

WOFF 2.0, basato sull'algoritmo di compressione Brotli e altri miglioramenti rispetto a WOFF 1.0 che offre una riduzione di oltre il 30% nella dimensione del file, è supportato in Chrome, Opera e Firefox.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ ha un esempio su come usarlo.

Fondamentalmente aggiungi un URL src al file woff2 e specifichi il formato woff2. È importante averlo prima del formato woff: il browser utilizzerà il primo formato supportato.

— Jyrki Alakuijala
fonte