2010-10-20 9 views
7

Sono consapevole del fatto che l'utilizzo di @ font-face consente al browser di scaricare un carattere personalizzato e utilizzarlo in una pagina Web proprio come qualsiasi carattere di sistema.Come funziona @ font-face?

Quello che voglio sapere è se il browser codifica il font o lo usa senza esporlo?

Grazie

+0

Cosa vuoi dire esponendolo? –

+0

Abbastanza bene, in realtà. –

+0

@Ian Devlin Con "exposing" intendo il permesso di essere usato da altri programmi. – hitautodestruct

risposta

6

Il browser non può proteggere la fonte dei caratteri. Una volta che le informazioni vengono ricevute dal browser, puoi tranquillamente presumere che l'utente avrà pieno accesso a qualsiasi cosa tu invii.

Quindi il problema di mantenere i caratteri protetti è fatto sia a livello legale (scegliendo i caratteri che consente l'incorporamento) o attraverso schemi di offuscamento lato server. Ad esempio, guardare i font incorporati attraverso TypeKit:

@font-face { 
    font-family:"rosewood-std-fill-1"; 
    src:url(data:font/opentype;base64,d09GRgABAAAAAEa4ABMAAAAA2XwA.....); 
    font-style:normal; 
    font-weight:400; 
} 

Il font è offuscato attraverso un processo di codifica Base64. Inoltre, il font è diviso in due e il numero di glifi è limitato a quelli necessari al sito web.

D'altra parte, guardando i kit FontSquirrel e Google Font API @font-face, è possibile vedere che l'effettiva fonte del font viene inviata all'utente - non è necessaria alcuna offuscazione. Inoltre, i proprietari dei font può richiedere una qualche forma di attribuzione, come ad esempio

Se il font è un font gratuito ($ 0.00 tassa di licenza), è possibile utilizzare questo tipo di carattere per incorporamento font-face, ma solo se si inserire un link al www.exljbris.nl sulla tua pagina e/o mettere questo avviso

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ 

nel file CSS il più vicino possibile al pezzo di codice che dichiari l'incorporamento font-face di questo font.

visto in this license. Pertanto, da tutti questi, possiamo concludere con sicurezza che il problema della sicurezza dei font non si verifica sul lato client, ma piuttosto ricade sulla spalla dello sviluppatore, e quindi i browser non possono e non fanno nulla per impedire agli utenti di ottenere l'accesso a questi caratteri.

+3

La codifica base64 non è offuscamento, è un mezzo per eliminare la necessità di effettuare una richiesta HTTP aggiuntiva per il file font mantenendo il tipo MIME "text/css". –

+0

@Stan Davvero, non riesco a pensare ad alcun altro motivo per cui. Typekit consente comunque fino a cinque tipi di carattere, quindi l'overhead della richiesta HTTP non è * quello * significativo. Avete dei documenti per eseguire il backup? ' –

+3

* Ogni * richiesta HTTP è significativa e base64 è una codifica di trasferimento del contenuto per la quale tutti hanno un decodificatore. L'obiettivo non è l'offuscamento: l'alternativa è un trasferimento binario, che non può essere incorporato nel foglio di stile. Se lo desideri, puoi scegliere di forzare una richiesta per un file di font; Typekit ha scelto di non farlo. (Io uso la stessa tecnica per piccole immagini di sfondo ripetute.) Ti hanno dato un file che è più accessibile a un utente rispetto a un file binario (non cercare nella cache, basta copiare dal file CSS, salvare e convertire). –

0

Nella maggior parte dei casi, il file di font è esposto in quanto è direttamente collegato dal file CSS, e, quindi, chiunque sia abbastanza intelligente può scaricare il font e installarlo sulla propria macchina. Questo è in parte il motivo per cui la maggior parte delle licenze di font commerciali vietano l'utilizzo su siti Web con @font-face. Ma ci sono tecniche che limitano questo. Ad esempio, controlla l'opzione "Solo web" sul generatore di font-face @ di Font Squirrel.

2

@font-face indica al browser dove scaricare il carattere effettivo.

Ad esempio, quando si utilizza Google's web fonts, ti danno i CSS in questo modo:

@font-face { 
    font-family: 'Cantarell'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw') format('truetype'); 
} 

Se si apre l'url (http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw) il browser scaricherà il file vero e proprio vero tipo di font.

Ho scaricato i caratteri di google utilizzando questo metodo (quindi i miei mock up di Photoshop hanno il carattere corretto).