@ font-face src: local - ¿Cómo usar la fuente local si el usuario ya la tiene?


82

¿Cuál es la forma correcta de usar @font-facepara que el navegador no descargue la fuente 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 la fuente ardilla y esa pregunta se ve así:

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

Respuestas:


104

Si desea buscar archivos locales primero, haga lo siguiente:

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

Aquí hay una descripción más elaborada de qué hacer .


3
¿Qué pasa si tenemos 2 srcs (como en el ejemplo de OP)? ¿Nos ponemos localel primero o el segundo?
mpen

-7

En realidad, no he hecho nada con font-face, así que tómate esto con una pizca de sal, pero no creo que haya ninguna forma de que el navegador diga 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 instalada en su máquina. La única forma de saberlo 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 usas en una fontdeclaración? (por ejemplo h1 { font: 'DejaVu Serif';)?


bueno, el problema de los nombres de las fuentes tiene un impacto corto aquí, supongo (nunca tuve ningún problema con él)
Thariama

Sí, supongo que es poco probable una colisión. Continua.
Paul D. Waite

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

@dbarbosa: Sé cómo font/ font-familytrabajo. ¡Claramente no sé cómo @font-facefunciona!
Paul D. Waite
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.