2010-10-01 5 views
45

Qual è il modo corretto di utilizzare @font-face in modo che il browser non scarichi il font se l'utente lo ha già?@ font-face src: local - Come utilizzare il font locale se l'utente lo ha già?

Sto usando @ font-face per definire DejaVu, che è già installato sul mio sistema (linux). Firefox non sta scaricando il font, ma Chromium lo sta scaricando ogni volta!

Il mio codice CSS, sulla base di font squirrel e that question simile a questa:

@font-face { 
    font-family: 'DejaVu Serif'; 
    src: url('DejaVuSerif-webfont.eot'); 
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

/* ... @font-face definitions for italic and bold omitted ... */ 

@font-face { 
    font-family: 'DejaVu Serif'; 
    src: url('DejaVuSerif-BoldItalic-webfont.eot'); 
    src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 
+0

Correlati: http://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local-mean – dbarbosa

risposta

60

Se si desidera verificare la presenza di file locali in primo luogo fare:

@font-face { 
font-family: 'Green Sans Web'; 
src: 
    local('Green Web'), 
    local('GreenWeb-Regular'), 
    url('GraublauWeb.ttf'); 
} 

v'è una descrizione più elaborata of what to do here.

+2

Cosa succede se abbiamo 2 'src's (come nell'esempio di OP)? Mettiamo 'local' sul primo o sul secondo? – mpen

-3

Non ho effettivamente fatto nulla con font-face, in modo da prendere questo con un pizzico di sale, ma non credo che ci sia in ogni modo per il browser per determinare definitivamente se un determinato carattere web installato sulla macchina di un utente o meno.

L'utente può, ad esempio, avere un diverso font con lo stesso nome installato sulla propria macchina. L'unico modo per dire definitivamente sarebbe quello di confrontare i file dei font per vedere se sono identici. E il browser non poteva farlo senza prima scaricare il tuo carattere web.

Firefox scarica il font quando effettivamente lo si utilizza in una dichiarazione font? (ad esempio h1 { font: 'DejaVu Serif';)?

+0

beh, il problema dei nomi dei font è di breve impatto qui credo (non ho mai avuto problema con esso) – Thariama

+0

Sì, immagino che una collisione sia improbabile. Proseguire. –

+4

font/font-family in css non fa scaricare nulla dal browser. Se non trova localmente il carattere, lo ignora. Ecco perché solitamente usiamo uno stack di font (una lista di font) - se non ha il primo, prova il secondo e così via. @ font-face è qualcosa di relativamente "nuovo" (http://stackoverflow.com/questions/2219916/is-font-face-usable-now) – dbarbosa