CSS @ font-face: ¿qué significa "src: local ('☺')"?

133

Estoy usando @font-facepor primera vez y descargué un kit de fuentes de fontsquirrel

El código que recomiendan insertar en mi CSS es:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Ahora, la cara sonriente me tiene perplejo. Pero también lo hace el número de URL en el src: ¿por qué recomiendan tantos archivos y todos se enviarán al navegador cuando se muestre una página? ¿Hay algún daño en eliminar todo menos el .ttf?

css font-face stephenmurdoch
fuente

Respuestas:

94

Si lees las notas en el generador de fuente de fuente de Font-Squirrel, verás que fue un truco de Paul Irish.

Aquí está el extracto de su blog :

Y ... con respecto a la @font-facesintaxis

Ahora recomiendo la variación de smiley a prueba de balas sobre la sintaxis original a prueba de balas.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Desde el post a prueba de balas:

Sí, es una cara sonriente. La especificación OpenType indica que los caracteres unicode de dos bytes no funcionarán en un nombre de fuente en Mac, por lo que disminuye la probabilidad de que alguien haya lanzado una fuente con ese nombre.

Hay algunas razones por las que smiley es una mejor solución:

  • El software Webkit + Font Management puede confundir las referencias locales, como convertir los glifos en bloques A.

  • En OS X, el software de gestión de fuentes puede alterar la configuración del sistema para mostrar un cuadro de diálogo cuando intente acceder a una fuente local () a la que se pueda acceder fuera de Biblioteca / Fuentes. Más detalles en mi publicación a prueba de balas. Font Explorer X también es conocido por estropear otras cosas en Firefox.

  • Aunque es poco probable, puede hacer referencia a una fuente local () que es completamente diferente de lo que cree que es. (Publicación de Typophile en diferentes fuentes, mismo nombre) Como mínimo es un riesgo, y está cediendo el control del tipo tanto al navegador como a la máquina host. Es posible que este riesgo no valga la pena al evitar la descarga de fuentes.

Todos estos son problemas de casos extremos, pero vale la pena considerarlos.

corroído
fuente
12
muchas gracias ☺ ahora está claro: acabo de encontrar este artículo en nicewebtype.com que también responde a todas mis otras preguntas
stephenmurdoch
9
así que, en esencia, la parte local de ese código dice "esta fuente se conoce localmente como X", y estamos usando el smiley para evitar que el navegador posiblemente use la fuente incorrecta con el mismo nombre (por las razones indicadas anteriormente). nice :)
abelito
3
¿Realmente necesitas una local()declaración? ¿Es redundante? ¿No debería el navegador usar tu primero url()sin él?
Simon East
Cuando veo mi fuente css en las herramientas de desarrollo de Chrome, la carita sonriente aparece así: “¿Es correcto?
Anthony
1
@Simon: La declaración local está ahí para admitir IE6 - 8 (vea la publicación del blog vinculada), así que a menos que no le interesen estos navegadores, es necesario.
Stijn de Witt
34

El local (☺︎) es un truco css para desviar IE6-8 de la descarga de fuentes que no puede usar (solo puede usar fuentes en formato EOT).

Explicado: la última propiedad src tiene prioridad en la cascada CSS, lo que significa que el CSS se analizará de abajo hacia arriba. El local (☺︎) hará que IE omita el src en la parte inferior, sin perder el ancho de banda descargando las fuentes que no puede usar, y más bien ir directamente a la fuente en .eotformato (definido en la línea anterior en su pregunta) que usará. El smiley es solo para asegurarse de que no habrá una fuente local con ese nombre (combinación de caracteres).

Lea más aquí: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Magne
fuente
-3

@ font-face La última propiedad src tiene prioridad en la cascada CSS, lo que significa que el CSS se analizará de abajo hacia arriba.

logu
fuente