2010-10-01 27 views
45

¿Cuál es la forma correcta de usar @font-face para que el navegador no descargue la fuente si el usuario ya la tiene?@ font-face src: local - ¿Cómo usar la fuente local si el usuario ya la tiene?

Estoy usando @ font-face para definir DejaVu, que ya está instalado en mi sistema (linux). Firefox no está descargando la fuente, ¡pero Chromium la está descargando todo el tiempo!

Mi código CSS, basado en font squirrel y that question tener este aspecto:

@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

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

Respuesta

60

Si desea comprobar si hay archivos locales primero hacer:

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

hay una descripción más elaborada of what to do here.

+2

¿Qué sucede si tenemos 2 'src's (como en el ejemplo de OP)? ¿Ponemos 'local' en el primero o el segundo? – mpen

-3

realidad no he hecho nada con font-face, por lo que tomar esto con una pizca de sal, pero no creo que haya cualquier forma para que el navegador determine definitivamente si una fuente web determinada está instalada en la máquina de un usuario o no.

El usuario podría, por ejemplo, tener una fuente diferente con el mismo nombre instalado en su máquina. La única manera de decirlo definitivamente sería comparar los archivos de fuentes para ver si son idénticos. Y el navegador no podría hacer eso sin descargar primero su fuente web.

¿Firefox descarga la fuente cuando realmente la usa en una declaración font? (por ejemplo, h1 { font: 'DejaVu Serif';)?

+0

Bueno, el problema con los nombres de las fuentes es de poco impacto, supongo (nunca tuve ninguno problema con esto) – Thariama

+0

Sí, supongo que una colisión es poco probable. Continua. –

+4

font/font-family en css no hace que un navegador descargue nada. Si no encuentra la fuente localmente, la ignora. Es por eso que usualmente usamos una pila de fuentes (una lista de fuentes) - si no tiene la primera, prueba la segunda y así sucesivamente. @ font-face es algo relativamente "nuevo" (http://stackoverflow.com/questions/2219916/is-font-face-usable-now) – dbarbosa

Cuestiones relacionadas