Ver Mensaje Individual
  #26 (permalink)  
Antiguo 14/10/2009, 15:12
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Guía: @font-face y creación de los .eot para IE

¿Seguimos con el tema y ampliamos algo más al respecto?
Porque parece que esta propiedad (@font-face) está más actual que nunca y eso hace correr "ríos de tinta" en múltiples blogs y páginas.
Un complemento al código de su uso que ya he visto recomendado en varías páginas (por qué no se me ocurrió ) es indicar la ruta al disco duro del visitante por si ya tiene instalada nuestra fuente y ahorrarnos todo lo relacionado con su descarga (que veremos algo más adelante).
La línea a incluir sería:
Cita:
@font-face {
font-family: 'saxmono';
src: local('saxmono'),
url('ruta/saxmono_1.ttf') format('truetype');
}
Nota que el final de la declaración a local es una "coma" (,) y no "punto y coma" (;)
Esa forma y disposición (precediendo la llamada a la local antes que a la de nuestro servidor y con la coma (,) me la he encontrado en distintos lugares.
También reseñable que cuando la llamada al .eot se realiza en la misma declaración que al ttf (o al .otf), la secuencia siempre es
Código css:
Ver original
  1. 1º= declaración de la familia -->  font-family: 'saxmono';
  2. 2º= Llamada al .eot -->            src: url("saxmono.eot");
  3. 3º= llamada a la local -->         src: local('saxmono'),
  4. 4º= llamada al servidor -->        url('ruta/saxmono_1.ttf') format('truetype');
Por si hubiese dudas, la regla quedaría:
Código css:
Ver original
  1. @font-face {
  2.   font-family: 'saxmono';
  3.   src: url("saxmono.eot");
  4.   src: local('saxmono'),
  5.   src: url('ruta/saxmono_1.ttf') format("truetype");
  6. }

Pero lo que realmente me ha animado a continuar el tema no es lo anterior, sino el artículo encontrado en
http://www.stevesouders.com/blog/200...d-performance/
y las advertencias y consejos que sobre @font-face hace y los enlaces que tiene a otros artículos de interés
* Paul Irish: Fighting the @font-face FOUT
* Stoyan Stefanov: Gzip your @font-face files
* Zoltan Hawryluk (again): More @font-face fun

Para desgracia mía, todos en inglés, así que no me atrevo a traducirte nada de ellos, y me abstengo de comentar nada de sus contenidos, de momento, pues necesitaré mi tiempo para asimilar un mínimo de tanta información.
No me atrevo a pedirlo, pero si me llevaría una alegría si alguien con conocimientos suficiente del inglés nos adelantase algo de todo ello .

Mientras, si estás interesado en el tema de las fuentes bonitas, ya tienes dónde seguir.

Un saludo

P.D.: llegué a ello a través de http://cssglobe.com/
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++