Perché dovremmo includere TTF, EOT, WOFF, SVG, ... in un font-face

Question

In CSS3font-face, ci sono più tipi di font inclusi come ttf, eot, woff, svg e cff.

Perché dovremmo utilizzare tutti questi tipi?

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

Answer 1

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

• eot è necessario per Internet Explorers che sono più vecchi di IE9 - hanno inventato le specifiche, ma EOT è un formato orribile che estrae, molte delle caratteristiche dei font.

• ttf e otf sono normali caratteri vecchi, ma alcune persone si sono infastidite dal fatto che questo significava che chiunque poteva scaricarle e usarle.

• Circa allo stesso tempo, iOS su iPhone e iPad ha implementato i font svg.

• Quindi, è stato inventato woff che ha una modalità che impedisce alle persone di piratare il font. Questo è il formato preferito.

Se non si desidera supportare IE 8 e più basso, e iOS 4 e inferiori, e Android 4.3 o versioni precedenti, allora si può solo utilizzare WOFF (e woff2, un WOFF più altamente compressa, per la più recenti browser che lo supportano.)

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

Supporto per woff è possibile controllare al http://caniuse.com/woff
Supporto per woff2 può essere controllata in http://caniuse.com/woff2

Answer 2

WOFF è una forma compressa (compressa) del carattere TrueType - OpenType. È piccolo e può essere consegnato in rete come un file grafico. Ancora più importante, in questo modo il font viene preservato completamente, incluse le tabelle delle regole di rendering a cui pochissime persone si interessano perché usano solo lo script Latino.

Dai un'occhiata a [URL morto rimosso]. Il font che vedi è un web sperimentale consegnato smartfont (woff) che ha migliaia di personaggi combinati che creano forme complesse. Il testo sottostante è un semplice codice latino di Singhala romanizzato. (Copia e incolla su Blocco note e vedi). Solo

WOFF può fare questo perché nessuno ha questo tipo di carattere, eppure si vede da nessuna parte (Mac, Win, Linux e anche su smartphone da tutti i browser tranne da IE. IE non avere il pieno supporto per i tipi di Open).

Answer 3

WOFF 2.0, basato sull'algoritmo di compressione Brotli e altri miglioramenti rispetto a WOFF 1.0 che riducono di oltre il 30% le dimensioni 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 si aggiunge un URL src al file woff2 e si specifica il formato woff2. È importante averlo prima del formato woff: il browser utilizzerà il primo formato supportato.