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

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?

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.

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/

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