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

font face sass

Question

Estoy usando @font-face por primera vez y descargué un font-kit 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 cosa de la carita sonriente me ha dejado perplejo. Pero también lo es el número de URL en el src: ¿por qué recomiendan tantos archivos y se enviarán todos al navegador cuando se presente una página? ¿Hay algún daño en eliminar todo menos el .ttf?

Answer 1

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

Answer 2

El local (☺︎) es un hack 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 de src tiene prioridad en la cascada de 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 ancho de banda descargando fuentes que no puede usar, y más bien irá directamente al EOT (definido en la línea de arriba) que usará. El emoticón es solo para garantizar que no haya una fuente local con ese nombre (combinación de caracteres).

Lea más aquí: this

Answer 3

si lees las notas en el generador de cara de fuente de font-squirrel, verás que fue un gotcha por paul irish.

Aquí está el extracto de su publicación en el blog :

Y ... con respecto a la sintaxis de @font-face

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 la publicación a prueba de balas:

Sí, es una cara sonriente. La especificación OpenType indica que cualquier carácter unicode de dos bytes no funcionará en absoluto 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 arruinar referencias locales, como convertir glifos en bloques A.

• En OS X, el software de administración de fuentes puede alterar la configuración del sistema para mostrar un cuadro de diálogo cuando se intenta acceder a una fuente local () a la que se puede acceder fuera de Biblioteca / Fuentes. Más detalles en mi publicación a prueba de balas. También se sabe que Font Explorer X estropea 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 Typophile en diferentes fuentes, mismo nombre) Por lo menos, es un riesgo, y está cediendo el control del tipo tanto al navegador como a la máquina host. Este riesgo puede no valer el beneficio de evitar la descarga de la fuente.

Todos estos son casos bastante importantes, pero vale la pena considerarlos.