Foros del Web » Creando para Internet » CSS »

Guía: @font-face y creación de los .eot para IE

Estas en el tema de Guía: @font-face y creación de los .eot para IE en el foro de CSS en Foros del Web. Hola a todas/dos: Me he permitido hacer una pequeña guía (tutorial) de cómo utilizar la regla @font-face y cómo crear los archivos .eot necesarios para ...

  #1 (permalink)  
Antiguo 20/09/2009, 06:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Guía: @font-face y creación de los .eot para IE

Hola a todas/dos:

Me he permitido hacer una pequeña guía (tutorial) de cómo utilizar la regla @font-face y cómo crear los archivos .eot necesarios para la familia de ie.

Si encuentras algo que pueda/deba ser corregido coméntamelo, por favor. Así la iremos puliendo.

Me dio por llamarla @font-face: usando fuentes bonitas aunque también podríamos corear "abajo la tiranía de las fuentes seguras"

Espero que la encuentres útil.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #2 (permalink)  
Antiguo 20/09/2009, 09:41
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 16 años, 4 meses
Puntos: 351
Respuesta: Guía: @font-face y creación de los .eot para IE

Felicitaciones y muchas Gracias Kseso?
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #3 (permalink)  
Antiguo 20/09/2009, 11:50
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola:

Cuando los maestros se ponen a investigar y jugar salen cosas como esta. ¡Muchas gracias Kseso?!



Saludos.

  #4 (permalink)  
Antiguo 20/09/2009, 12:11
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 8 meses
Puntos: 772
Respuesta: Guía: @font-face y creación de los .eot para IE

Bonito tutorial kseso?

Podrías ponerlo en las FAQs para tenerlo a mano.

Saludos,
  #5 (permalink)  
Antiguo 20/09/2009, 15:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años
Puntos: 280
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por JavierB Ver Mensaje
Bonito tutorial kseso?

Podrías ponerlo en las FAQs para tenerlo a mano.

Saludos,
Exacto, porque en algún momento hará falta y merecerá la pena tenerlo localizado.

Otra vez, enhorabuena y gracias por compartir.
  #6 (permalink)  
Antiguo 20/09/2009, 15:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Guía: @font-face y creación de los .eot para IE

Pues si dos capos de la materia coinciden, posiblemente uno de los dos tenga razón (al menos)
Incluyo una reseña en las faq's, entonces.

Gracias a todos: Mik, Javier, Jomaruro y Pao por vuestras palabras.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 20/09/2009, 16:36
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Genial kseso?.

Muchas gracias.

Una preguntita: el efecto que se consigue con text-shadow ¿no se puede aplicar a las fuentes eot?... ¿es así?.

Es una lástima porque los titulares con el efecto sombreado son estupendos.

Gracias, de nuevo.

Bye
  #8 (permalink)  
Antiguo 20/09/2009, 16:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola Deirde
De nada.

El text-shadow no tiene que ver con los eot's, sino que ie no soporta esa propiedad (ahora no recuerdo si el 8 también).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 20/09/2009, 17:35
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Gracias, saludos

Bye
  #10 (permalink)  
Antiguo 09/10/2009, 08:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Guía: @font-face y creación de los .eot para IE

Ampliando recursos relacionados con @font-face:
http://www.fontsquirrel.com
Página donde además de su selección de fuentes, también disponen de "@font-face Kits":
Cita:
Click on "Get Kit" for any font to download a complete @font-face kit, including a sample stylesheet for that font. Each kit also includes EOT files for each font in the family for compatibility with Internet Explorer. Please note that the IE CSS declarations do not have Bold, Italic, or Bold Italic variants because they are not supported. These EOT files can only display one font from the family.
Sólo para quien no disfrute de hacérselo por sí mismo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 09/10/2009, 17:49
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 6 meses
Puntos: 1284
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola.

Ya que solo te arrojan flores, voy a arrojarte un "balde de agua fría..."...

Se trata de lo que veo en mi máquina:

firefox portable (el que uso habitualmente) con este enlace: Font-face Demo for the Florante at Laura Font, no se vé... con opera usb, y chrome tampoco... eso sí, se distinguen en opera unite (10), safari, chrome y explorer...

Lo cierto es que, tal como contestásteme en otro mensaje, no es del todo fiable...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 10/10/2009, 00:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años
Puntos: 280
Respuesta: Guía: @font-face y creación de los .eot para IE

Buenas, caricatos.
Supongo que estarás al tanto de que, al margen de que seguramente tendrás razón, a través de algunas consultas, en el foro de CSS se han detectado otros muchos problemas de dibujado del Firefox portable. Y es que ha debido salir un poco malo o así.
Un comentario por si no estabas al tanto, que a veces algo así te puede volver loco.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 10/10/2009, 05:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola Caricatos.

Créeme si te digo que siento si en mi otra respuesta has percibido cualquier "tono" subyacente. No era mi intención.
Tampoco lo era sonar ni categórico ni transmitir que sea un método infalible y seguro 100 en todas y cada una de las situaciones. Por eso terminaba diciendo que cada método (@font-face y el de sustitución) tiene sus "peligros".

Sobre la página que enlazas de fontsquirrel, me es totalmente ajena y símplemente la he incluido como un recurso más relacionado con el tema.

Y sobre tu "balde de agua fría...", además de que se agradece, no lo veo como tal. Es un dato valioso a tener en cuenta y que evitará más de una "comedura de coco" en más de una ocasión.
Al fin y al cabo, cuando se comparte algo es con la secreta esperanza de que el resto de usuarios lo complemente y mejore, a parte de que le sea útil a alguien.

Una vez más, Pepe, mis disculpas si transmití lo que no quise.

Un saludo.

P.D.: esperando tus próximos "baldes" para mejorar
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 10/10/2009, 05:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 6 meses
Puntos: 1284
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por Mikmoro Ver Mensaje
Buenas, caricatos.
Supongo que estarás al tanto de que, al margen de que seguramente tendrás razón, a través de algunas consultas, en el foro de CSS se han detectado otros muchos problemas de dibujado del Firefox portable. Y es que ha debido salir un poco malo o así.
Un comentario por si no estabas al tanto, que a veces algo así te puede volver loco.
Evidentemente todos los navegadores pueden tener problemas de implementación... pero cada uno tiene sus preferencias, y elige el que le parece mejor... y la solución del software portable es la que he decidido adoptar, evidentemente con sus consecuencias... fíjate que hace pocos días compre un disco duro nuevo para mi portátil, y usando la mayoría de mis aplicaciones de ese modo, en pocas horas tuve mi sistema funcionando perfectamente... cuentas de correos, páginas de logueo, etc.

Cita:
Iniciado por kseso? Ver Mensaje
...si en mi otra respuesta has percibido cualquier "tono" subyacente. No era mi intención.
Tampoco lo era sonar ni categórico ni transmitir que sea un método infalible y seguro 100 en todas y cada una de las situaciones. Por eso terminaba diciendo que cada método (@font-face y el de sustitución) tiene sus "peligros".
...
P.D.: esperando tus próximos "baldes" para mejorar
¡Je, je!

Uso el sistema font-face desde mi primera página, que quería que sea totalmente personalizada, con musiquita de fondo (aunque hoy se critique mucho), y los tipos que yo quisiera. Y ya funcionaban las fuentes eot, por supuesto, para el explorer, que era el que usábamos todos.

No percibí ningún tono especial, pero simplemente al ver que no funciona el sistema en todos los navegadores, creí oportuno hacer el comentario... y lo del balde de agua fría... me acuerdo de los carnavales de mi infancia, y en muchas ocasiones, el acto "literal" es estupendo (incluso recibirlo), pero no vayas a hacerme mucho caso con estas cosas "literales"...

Por cierto, seguro que ya te lo comenté, pero "Buen Trabajo"

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #15 (permalink)  
Antiguo 10/10/2009, 09:57
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola...

Un pequeño comentario abundando en lo que dice Mikmoro. Sería bueno precisar que en ff 2 no se dibujan las fuentes tanto si es 'real' como si es 'virtual' (portable). Tampoco la versión portable de ff 3.0.11 dibuja las fuentes del sitio nombrado. Pero en la version 3.5.2 virtual (portable) de Firefox sí se dibujan perfectamente.

Como Caricatos no ha específicado (creo yo) la versión de ff portable que utiliza, quería precisar que las versiones anteriores a la 3.5, tanto de instalación como portables, al menos a mi, no dibuja las fuentes.

Bye
  #16 (permalink)  
Antiguo 10/10/2009, 15:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años
Puntos: 280
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por deirdre Ver Mensaje
Pero en la version 3.5.2 virtual (portable) de Firefox sí se dibujan perfectamente.
Ah, correcto, me refería a versiones del portable anteriores (tipo 2.0), y por eso decía que debió salir medio malo. Por descontado, era de suponer que en posteriores versiones arreglarían todo lo posible, y si así ha sido, sirva este mensaje para los que gustan de usar portables de FF: "señores, actualicen sus portables, que han corregido muchas cosillas".

A eso iba, caricatos, por supuesto respetando el gusto y preferencias de cada uno, claro.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 11/10/2009, 01:42
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 6 meses
Puntos: 1284
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por Mikmoro Ver Mensaje
..."señores, actualicen sus portables, que han corregido muchas cosillas".

A eso iba, caricatos, por supuesto respetando el gusto y preferencias de cada uno, claro.
Acabo de actualizarlo , te aseguro que procuro siempre estar actualizado, pero siempre que iba a actualizarlo, no existía la versión en español, y decidía esperar... incluso hoy, al hacerlo, no lo hice en nuestro idioma, y tuve que arreglarlo con una chapuza (copiando una carpeta de la versión española, descomprimiéndola antes en otro sitio de mi máquina...)

Bueno, en resúmen, sigue sin funcionar en versiones viejas de FF portable, y en chrome... etc.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #18 (permalink)  
Antiguo 11/10/2009, 10:17
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Bueno, es que en versiones viejas de ff (la 2 y la 3) no funciona aunque no sea portable (que sea de instalación normal).
  #19 (permalink)  
Antiguo 11/10/2009, 15:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Guía: @font-face y creación de los .eot para IE

Aquí un listado (algo desactualizado) de navegadores y declaraciones/selectores que soportan:
http://www.quirksmode.org/css/contents.html
Hay otra página que lo que hace es avaluar lo que el navegador con el que le entras soporta. A ver si la reencuentro.

Un saludo

P.D.: Pepe, mientras el balde fuese agua y no seguido de harina, plumas u objetos similares (también vivencias de antaño, muy antaño
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #20 (permalink)  
Antiguo 11/10/2009, 17:03
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Para Caricatos, por si es de su interés:

En esta página se suelen encontrar ff portables muy actualizados (incluso en español):

http://portableapps.com/apps/interne...e/localization

Ahora tienen la versión 3.5.3 (también en español de España).

Bye
  #21 (permalink)  
Antiguo 11/10/2009, 17:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años
Puntos: 280
Respuesta: Guía: @font-face y creación de los .eot para IE

Derecho a marcadores
__________________
Visita mi nueva web idplus.org
  #22 (permalink)  
Antiguo 12/10/2009, 00:23
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 6 meses
Puntos: 1284
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por deirdre Ver Mensaje
Para Caricatos, por si es de su interés:

En esta página se suelen encontrar ff portables muy actualizados (incluso en español):

http://portableapps.com/apps/interne...e/localization

Ahora tienen la versión 3.5.3 (también en español de España).

Bye
Hola:

Te lo agradezco deirdre, pero si la instalación es nueva, lo normal es perder toda la configuración del programa (marcadores, preferencias, claves, complementos...), por esa razón, uso la opción de "Buscar actualizaciones...".

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #23 (permalink)  
Antiguo 12/10/2009, 09:45
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Caricatos, en tu caso, utilizando el portable firefox ¿no es posible utilizar 'Buscar actualizaciones' del propio firefox?

Recuerdo que firefox 2, al actualizar al 3 pedía una nueva instalación, pero ahora no recuerdo si dentro de la versión 3 (hasta la actual 3.5.3) se puede siempre actualizar sin perder nada de la configuración propia, incluso utilizando un postable. Es una duda...

Bye
  #24 (permalink)  
Antiguo 13/10/2009, 03:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 6 meses
Puntos: 1284
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por deirdre Ver Mensaje
Caricatos, en tu caso, utilizando el portable firefox ¿no es posible utilizar 'Buscar actualizaciones' del propio firefox?

Recuerdo que firefox 2, al actualizar al 3 pedía una nueva instalación, pero ahora no recuerdo si dentro de la versión 3 (hasta la actual 3.5.3) se puede siempre actualizar sin perder nada de la configuración propia, incluso utilizando un postable. Es una duda...

Bye
Hola:

No sé desde que versión de ff portable se mantienen los datos, pero creo que ya con la 2 se mantenía los datos sin problemas...

El problema es que a veces algunos de los plugins o complementos no son compatibles con la nueva versión, y no se actualizan, como en el caso actual del idioma, pero siempre salen esas nuevas versiones de los complementos en poco tiempo.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #25 (permalink)  
Antiguo 13/10/2009, 09:23
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola

La certeza que tengo es el ff 2 portable nunca actualiza a ff 3 (tampoco el de instalación en el sistema). Pero no entiendo porqué ff 3.0.11 portable sólo alzanza a actualizarse a ff 3.0.14 y para llegar a ff 3.5 sea necesario partir de instalación nueva, perdiéndose en el camino toda la configuración propia.

Debo aclarar que todos los portables que utilizo son de fabricación propia (con el programa ThinApp).

Bye
  #26 (permalink)  
Antiguo 14/10/2009, 15:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 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? +++
  #27 (permalink)  
Antiguo 15/10/2009, 12:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
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 .
+1

Saludos.

  #28 (permalink)  
Antiguo 03/12/2009, 18:03
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 15 años
Puntos: 1
De acuerdo Respuesta: Guía: @font-face y creación de los .eot para IE

Hola lei tu tutorial de @font-face y lo utilize para incluir una fuente que yo como diseñadora gráfica habia utilizado para mi imagen corporativa. La movida es que ahora el unico navegador en que se ve la fuente bien (osea que la coge) es el opera 10 de mac, en ningun otro sitio me la coge. ni firefox, ni safari, y en explorer no he querido ni mirar, mi problema es que mañana por la mañana entrego la web que es un proyecto de final de master y la tengo que presentar y me gustaria dejarla en internet, pero como comprendo pues casi nadie usa opera y menos mac (en el mundo este de la web) entonces me da mucha rabia y la unica solución a posteriori de presentar mañana la web (que lo haré en opera) sera rasterizar todos los textos como imagenes png y ya esta. Yo tengo dw CS4 y el otro dia validado en la pagina de w3c el css me dijo que la version que tenia era 2.1, claro la regla que tu has expuesto en este tutorial (muy interesante) es para 3.0 y yo creo que esa es la movida porque no me lo coge ningun otro navegador excepto opera, y en mac, en pc hace lo que le da la real gana.
Bueno solo comentartelo para si hay alguna solución (que no sea rasterizar todo) para que yo pueda subir la web y mas o menos en casi todos los navegadores, claro imposible o utopia que sea en todos.
Gracias por tu sabiduria, espero que en breve pueda diseñar webs con fuentes que no sean las estandares (que para una diseñadora gráfica como yo SON HORRIBLES)
  #29 (permalink)  
Antiguo 05/12/2009, 05:50
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 22 años
Puntos: 11
Respuesta: Guía: @font-face y creación de los .eot para IE

Hola, ante todo felicitar a kseso por este excelente tutorial. A continuación comentar, que al principio, con el contenido del tutorial, encontré el mismo problema con el que os estáis encontrando casi todos. No me iban las fuentes en varios navegadores. A parte, de la molestia de buscar y bajar los programas en cuestión. Pero, lo que me parece que no se dio cuenta nadie, y yo vi ya por casualidad, es que en el mismo tutorial, hay un enlace a la página http://www.fontsquirrel.com/ en el que si accedemos a la sección @font-face Generator tendremos un maravilloso generador de fuentes, en el que podremos subir la fuente que queramos, y marcando casi todas las opciones, nos dará para bajar un archivo comprimido que dispone del código fuente a insertar en nuestra página, así como 3 o 4 archivos con nuestra fuente codificada.
Lo probé, lo apliqué en mi web, y de momento, en todos los navegadores que lo he probado, me va perfectamente, incluso con IE8 que dicen en varias páginas que no es compatible.

Os invito a que lo probéis, y comentéis los resultado.

Un saludo y suerte! ^^
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #30 (permalink)  
Antiguo 05/12/2009, 15:00
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 15 años
Puntos: 1
Respuesta: Guía: @font-face y creación de los .eot para IE

Cita:
Iniciado por mdk Ver Mensaje
Hola, ante todo felicitar a kseso por este excelente tutorial. A continuación comentar, que al principio, con el contenido del tutorial, encontré el mismo problema con el que os estáis encontrando casi todos. No me iban las fuentes en varios navegadores. A parte, de la molestia de buscar y bajar los programas en cuestión. Pero, lo que me parece que no se dio cuenta nadie, y yo vi ya por casualidad, es que en el mismo tutorial, hay un enlace a la página http://www.fontsquirrel.com/ en el que si accedemos a la sección @font-face Generator tendremos un maravilloso generador de fuentes, en el que podremos subir la fuente que queramos, y marcando casi todas las opciones, nos dará para bajar un archivo comprimido que dispone del código fuente a insertar en nuestra página, así como 3 o 4 archivos con nuestra fuente codificada.
Lo probé, lo apliqué en mi web, y de momento, en todos los navegadores que lo he probado, me va perfectamente, incluso con IE8 que dicen en varias páginas que no es compatible.

Os invito a que lo probéis, y comentéis los resultado.

Un saludo y suerte! ^^
Jolin pos que suerte, yo no se que hecho tal vez sea cosa del sistema operativo, que en mac no funcione, no se pero yo cree mi archivo eot con la fuente que yo queria, pero nada es que era muy curioso incluso con la misma version de opera, la fuente subida en el hosting, intalada en local, no me funcionaba, solo se veia en mi portatil, no se cosa de expediente X, nada ya la presente en mi portatil, y bueno le he prometido a mi profe que buscaré la manera de arreglarlo. y al final he decidido que los textos largos los rasterizaré como imagen en illustrator y los botones y enlaces los hare en flash, porque de que me coja la fuente (jolin ni que fuera cirilico) dimiti.

Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 6 personas




La zona horaria es GMT -6. Ahora son las 15:33.