2015-03-23 15 views
6

Ho un carattere personalizzato nei seguenti formati (con dimensione del file):Qualsiasi vera differenza tra i formati di file per i font

font.eot (66kb)

font.svg (204KB)

font.afm (79kb)

font.otf (107KB)

font.woff (42kb)

font.pfb (130KB)

font.ttf (66kb)

Così il esattamente lo stesso tipo di carattere ha dimensioni dei file completamente diverso a seconda del formato. .woff è di dimensioni ridotte.

Secondo la pagina @font-face su w3school, EOT funziona su IE6 + mentre altri formati funzionano su IE9 + - oltre a questo, non riesco a trovare alcuna informazione sulle differenze tra questi formati.

La mia domanda è, fa alcuna differenza in termini di qualità o compatibilità scegliendo quale formato?

+0

Non sono sicuro della qualità, ma in termini di compatibilità, '.EOT' è utilizzato per IE <= 8 e' .SVG' è utilizzato per iOS Safari 3.2-4.1. Ecco un buon [riferimento] (http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/). –

+0

@HashemQolami Interessante, quindi SVG è la scommessa più sicura per tutto oltre a IE? –

+0

Beh, non in realtà. Il font SVG non è implementato in Firefox. Vedi: https://bugzilla.mozilla.org/show_bug.cgi?id=119490 –

risposta

7

Assolutamente si. Ecco un grande articolo sulla domanda esatta che stai chiedendo.

http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

V'è un altro tipo di carattere che non hai elencare ed è il formato più consigliato in termini di dimensioni del file (più piccolo) e compatibilità con i browser: WOFF (Web Open Font Format).

Se si sceglie come target IE 8 e versioni successive, sarà necessario utilizzare qualcosa in combinazione con WOFF. Ecco un esempio targeting dei browser legacy:

@font-face { 
    font-family: Graublauweb; 
    src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */ 
    src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */ 
    url('Graublauweb.woff') format('woff'), /* Modern Browsers */ 
    url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */ 
} 

E anche se non del tutto "ci siamo ancora" in termini di tassi di adozione del browser, il futuro sarà WOFF 2.0 come i tassi di compressione sarà vicino al 30% - 50% rispetto al WOFF.

Ecco un'altra risorsa che descrive i diversi formati di font: http://www.w3schools.com/css/css3_fonts.asp

font TrueType (TTF)

TrueType è un font standard sviluppata alla fine del 1980, da Apple e Microsoft. TrueType è il formato di carattere più comune per entrambi i sistemi operativi Mac OS e Microsoft Windows.

font OpenType (OTF)

OpenType è un formato per i font scalabili per computer. È stato creato su TrueType ed è un marchio registrato di Microsoft. I font OpenType sono usati comunemente oggi sulle principali piattaforme di computer.

Il Web Open Font Format (WOFF)

WOFF è un formato per l'utilizzo nelle pagine web font. È stato sviluppato nel 2009 ed è ora una raccomandazione del W3C. WOFF è essenzialmente OpenType o TrueType con compressione e metadati aggiuntivi. L'obiettivo è supportare la distribuzione dei font da un server a un client su una rete con limiti di larghezza di banda.

Il Web Open Font Format (WOFF 2,0)

font TrueType/OpenType che fornisce una migliore compressione rispetto WOFF 1.0.

SVG Fonts/Forme

font SVG permettono SVG di essere usato come glifi la visualizzazione del testo. Le specifiche SVG 1.1 definiscono un modulo font che consente la creazione di font all'interno di un documento SVG. È inoltre possibile applicare i CSS ai documenti SVG e la regola @ font-face può essere applicata al testo nei documenti SVG.

font Embedded OpenType (EOT)

caratteri EOT sono una forma compatta di font OpenType progettati da Microsoft per l'uso come font incorporati nelle pagine Web.

+0

Oh sì, ho dimenticato di aggiungerlo. Ed è vero, è la più piccola, verifica la domanda aggiornata. –

+1

Sono curioso, come funziona esattamente quel pezzo di codice? Tutto quello che vedo è un elenco dei diversi formati, quindi non si limitano a scavalcare se stessi e l'ultimo diventa quello "attivo"? Ecco come funziona il CSS in generale. –

+1

@HenrikPetterson Il descrittore 'src' accetta un elenco di URL/formati di caratteri separati da una virgola', '. Gli UA (browser Web) devono scegliere il primo URL/formato accessibile/accettabile dall'elenco. La [spec] (http://dev.w3.org/csswg/css-fonts-3/#src-desc) afferma: 'Quando è necessario un font, l'interprete itera su una serie di riferimenti elencati, usando il primo uno che può attivare con successo. I font che contengono dati non validi o facce font locali non trovati vengono ignorati e l'agente utente carica il font successivo nell'elenco. –

Problemi correlati