2010-10-20 10 views
7

Soy consciente de que usar @ font-face permite que el navegador descargue una fuente personalizada y la use en una página web como cualquier fuente del sistema.¿Cómo funciona @ font-face?

Lo que quiero saber es si el navegador codifica la fuente o la usa sin exponerla?

Gracias

+0

¿Qué quieres decir con exponerlo? –

+0

Bastante bien, en realidad. –

+0

@Ian Devlin Al "exponer" me refiero a permitir que otros programas lo utilicen. – hitautodestruct

Respuesta

6

El navegador no puede proteger la fuente de las fuentes. Una vez que el navegador recibe la información, puede asumir que el usuario tendrá acceso total a lo que usted le envíe.

Por lo tanto, el problema de mantener las fuentes seguras se realiza ya sea en el nivel legal (seleccionando las fuentes que permiten la incrustación) o mediante esquemas de ofuscación del lado del servidor. Por ejemplo, mira a través de las fuentes incrustadas TypeKit:

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

La fuente se ofusca a través de un proceso de codificación base64. Además, la fuente se divide en dos y el número de glifos se limita a solo los que necesita el sitio web.

Por otro lado, mirando los kits FontSquirrel y Google Font API @font-face, puede ver que la fuente real de la fuente se envía al usuario, no se requiere ofuscación. Además, los propietarios de las fuentes pueden pasar por una atribución, como

Si la fuente es una fuente libre ($ 0.00 tasa de licencia), puede utilizar esta fuente para la incrustación de fuentes-cara, pero sólo si se poner un enlace a www.exljbris.nl en su página y/o poner este aviso

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

en su archivo CSS lo más cerca posible a la pieza de código que declare la incorporación font-face de esta fuente.

visto en this license. Por lo tanto, de todos estos, podemos concluir con seguridad que el problema de la seguridad de fuente no ocurre en el lado del cliente, sino que recae en el desarrollador, por lo que los navegadores no pueden hacer nada para evitar que los usuarios accedan a él. a estas fuentes.

+3

La codificación base64 no es una ofuscación, es un medio de eliminar la necesidad de realizar una solicitud HTTP adicional para el archivo de fuente mientras se mantiene el tipo MIME "text/css". –

+0

@Stan Realmente, no se me ocurre ningún otro motivo. Typekit solo permite hasta cinco fuentes de todos modos, por lo que la sobrecarga de la solicitud HTTP no es * tan * significativa. ¿Tiene algún documento para respaldar? ' –

+3

* Cada * solicitud de HTTP es significativa, y base64 es una codificación de transferencia de contenido para la que todo el mundo tiene un decodificador. El objetivo no es ofuscación: la alternativa es una transferencia binaria, que no puede incorporarse en la hoja de estilo. Puede elegir forzar una solicitud de un archivo de fuente si lo desea; Typekit ha elegido no hacerlo. (Utilizo la misma técnica para pequeñas imágenes de fondo repetidas.) Le han dado un archivo que es más accesible para un usuario que un binario (sin buscar en el caché, solo copie desde el archivo CSS, guarde y convierta). –

0

En la mayoría de los casos, el archivo de fuente se expone en la que se vincula directamente desde el archivo CSS, y por lo tanto cualquier persona bastante inteligente puede descargar la fuente e instalarlo en su máquina. En parte, esto explica por qué la mayoría de las licencias de fuentes comerciales prohíben su uso en sitios web con @font-face. Pero hay técnicas que limitan esto. Por ejemplo, consulte la opción "Solo web" en el generador @ font-face de Font Squirrel.

2

@font-face le dice a su navegador dónde descargar la fuente real.

Por ejemplo, cuando se utiliza Google's web fonts, te dan CSS como esto:

@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'); 
} 

Si abre la url (http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw), el navegador descarga el archivo real cierto tipo de fuente.

He descargado las fuentes de Google utilizando este método (por lo que mis maquetas de Photoshop tienen la fuente correcta).