¿Cuál es la forma correcta de usar @font-face
para 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:
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 .
fuente
src
s (como en el ejemplo de OP)? ¿Nos ponemoslocal
el primero o el segundo?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
font
declaración? (por ejemploh1 { font: 'DejaVu Serif';
)?fuente
font
/font-family
trabajo. ¡Claramente no sé cómo@font-face
funciona!