Foros del Web » Creando para Internet » CSS »

Implementacion y uso de tipografias no instaladas en un cliente web

Estas en el tema de Implementacion y uso de tipografias no instaladas en un cliente web en el foro de CSS en Foros del Web. Saludos Investigue la estructura de los exploradores web y sus motores llegando a varias conclusiones de como solucionar este mayúsculo problema que se tiene al ...
  #1 (permalink)  
Antiguo 19/10/2010, 09:07
 
Fecha de Ingreso: septiembre-2009
Ubicación: Queretaro
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 1
De acuerdo Implementacion y uso de tipografias no instaladas en un cliente web

Saludos

Investigue la estructura de los exploradores web y sus motores llegando a varias conclusiones de como solucionar este mayúsculo problema que se tiene al momento de hacer de una forma excelente el diseño ya que por medios de accesibilidad de los usuarios las tipografías cambian, y hay veces que queremos que queden las palabras a estilo y tamaño como quedarían en una imagen pero necesitamos que sean estas palabras en texto HTML

Pues como hacerlo aquí un pequeño manual.

Hace tiempo encontré una buena opción utilizando fuentes con formato *.pfr

pero el problema es de que pide la excusión de un ActiveX y el explorador Chrome quedaba bailando.

ahora se complementa con esta solucion:

-------------------------------------------------------------------------------
El embebimiento de fuentes utilizando @font-face es verdaderamente un arte oscura y compleja que debe ser dominada.

Es por eso que en esta nota te traemos la guía maestra sobre cómo embeber fuentes en tu sitio web. ¡Esperamos que te sea de utilidad!
Formatos de Fuentes

Hablando de forma general, hoy en día, una fuente de nuestro sistema tendrá uno de estos dos formatos: TrueType (con una extensión de archivo .ttf) u OpenType (con una extensión de archivo.otf). Si bien sería genial tirar una fuente de estas en una web y linkearla, nos enfrentamos a dos problemas mayores:
  • La licencia
  • El soporte del navegador

Licenciación

La concesión de licencias es uno de los mayores obstáculos. Puede ser difícil encontrar una fuente que realmente funciona dentro de la estética general de un diseño. Es la razón por la que hemos tenido que recurrir a la exportación de imágenes sIFR o Cufon.

Incluso muchas fuentes libres tienen limitaciones en cuanto a cómo pueden ser utilizadas, muchas veces requieren instrucciones específicas sobre la vinculación de nuevo a la fuente original, o sólo se permite su uso en sitios no comerciales.

En estos días, una serie de recursos están surgiendo, especialmente los dedicados a la incrustación de fuentes. Un buen comienzo para encontrar la fuente adecuada para nuestro proyecto sería Font Squirrel. Font Squirrel incluso proporciona kits @font-face para hacer que la aplicación en nuestro sitio web sea fácil. Sin embargo, incluso estos kits no dan soporte de navegadores completo.
Soporte de Navegadores

El soporte de navegadores es el mayor problema. El embebimiento de fuentes con una fuente TrueType u OpenType sólo funciona de esta forma en Firefox 3.5, Safari 3.1, y Opera 10. (Lo puedes permitir en tu copia de Chrome 2 utilizando la línea de comando switch.)

Pero lo podemos mejorar todavía más. Podemos lograr que funcione en Internet Explorer 4+, Chrome 0.3+, Opera 9+ e incluso podemos lograr un poco de acción móvil en Safari.
EOT

Internet Explorer soporta un tipo de formato particular llamado Embedded OpenType que proporciona algo de control sobre dónde y cómo se permite embeber la fuente. Necesitarás convertir tu TTF al formato EOT. Microsoft pone a nuestra disposición una herramienta llamada WEFT pero no siempre funciona. Por suerte, hay una herramienta de línea de comando llamada TTF2EOT que puede convertir tu fuente.

Si tienes un archivo OTF, necesitarás convertirlo a TTF antes de pasarlo a EOT. FontForge se puede utilizar para llevar a cabo esto.

Haz clic aquí para ver la captura de pantalla de la conversión de OTF a TTF »

Como verás pronto, tener el archivo en formato TTF nos ayudará en los próximos pasos.
SVG

Con TTF/OTF y EOT, tenemos cubiertos los navegadores decentes pero el toque de gracia es añadir más formatos de fuente a la mezcla: SVG. Las fuentes SVG son soportadas por Chrome 0.3+ sin tener que usar un hack de línea de comando, junto con Opera 9 y iPhone OS 3.1.

Existe una aplicación Java llamada Batik que permite exportar a formato SVG, ésta puede echarse a andar desde la línea de comando, y al hacerla andar deberás especificar el parámetro del ID. La ID es importante a la hora del CSS.


Código:
 java -jar batik-ttf2svg.jar ./MuseoSans-500.ttf -o museo.svg -id museo
Una de las preocupaciones en la exportación a SVG es el tamaño del archivo. Inmediatamente notamos que la fuente de 29k estaba pasando más de 100k. La principal razón fue el número de elementos hkern que, supongo, se dirigen a kerning. Sin embargo, deberías ser capaz de eliminarlos sin afectar mucho la muestra de tu fuente, pero disminuyendo en gran medida el tamaño del archivo. La otra cosa que notamos fue glyph-name="null" en todos los nodos glyph. Estos se pueden eliminar sin afectar a la visualización de la fuente. Una vez hecho las fuentes SVG serán más pequeñas que la fuente TrueType original que se había convertido.
CSS

Ahora que tenemos nuestros tres archivos-TTF (o OTF), EOT y SVG-es tiempo de comenzar con el CSS.

Código HTML:
@font-face {
   
        font-family: 'GothicCustom';
   
          src: url("LeagueGothic.eot");
   
          src: local('League Gothic'),
   
             url("LeagueGothic.svg#lg") format('svg'),
   
             url("LeagueGothic.otf") format('opentype');
   
      }
El nombre de familia fuente que especifiquemos aquí es arbitrario.

La sintaxis SVG posee una cosa particular a notar, y esto es el anchor de ID luego del nombre de fuente. Específica la ID que utilizaste cuando realizaste la conversión SVG. De forma alternativa, abre la fuente SVG y asegúrate que el elemento fuente posee un ID.

Código HTML:
<font id="lg"> 
Especificar la familia fuente funciona de forma normal. Sólo especifíca el nombre de fuente que utilizaste en tu declaración @font-face.

Código HTML:
font-family: 'GothicCustom', 'Arial Narrow', sans-serif;
Subconjuntos

En la captura de pantalla, dimos una demostración rápida de cómo hacer subconjuntos de fuentes limpiando los caracteres que no van a ser utilizados en la fuente final. ¿Por qué quieres hacer subconjuntos de fuentes? Hace que el archivo sea más pequeño. Algunos archivos de fuentes fácilmente pesan 200k. Eso es mucho para descargar cuando la gente no lo necesita.

Si optimizas tus imágenes ¿Por qué no hacerlo con tus fuentes?
Bug transformador de texto

Hay una advertencia a tener en cuenta al realizar subconjuntos. Una declaración text-transform: uppercase es todo lo que se necesita.

Código HTML:
<div>About</div>
   
      div { text-transform:uppercase; }
Esto funciona bien en Firefox y Safari, pero Opera e Internet Explorer ambos parecen hacer decidido el uso de una fuente para un carácter en particular observando el carácter en minúscula en primer lugar. Esto quería decir que estaba usando los caracteres en mayúsculas de una fuente de reserva. Eso es ciertamente menos que ideal.

Por supuesto, siempre puedes cambiar el código fuente HTML para que sea mayúscula, si estabas dispuesto a llegar a la muerte en la eliminación de los glifos.
Imprimir hojas de estilo

Las fuentes personalizadas también funcionan bien con las hojas de estilo de impresión. No era como el uso de técnicas de reemplazo mediante una imagen y luego tener que recurrir a una fuente del navegador aburrido para imprimir. Se siente bien la impresión de una página de nuestro sitio que todavía utiliza las mismas fuentes, como lo que vimos en la pantalla.
-------------------------------------------------------------------------------
  #2 (permalink)  
Antiguo 19/10/2010, 09:16
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Buen intento, aunque este artículo sea copiadazo, pero bueno...
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 19/10/2010, 09:27
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

De hecho, está incompleto o es bastante antiguo, falta alguna cosita más para hacerlo totalmente funcional.

Paul Irish lo explica perfectamente aqui:

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  #4 (permalink)  
Antiguo 19/10/2010, 09:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

O se modifica para otorgar los créditos (obligados) o diréctamente se borra este tema por se un plagio descarado.

Una sencilla búsqueda con la cadena :" El embebimiento de fuentes utilizando @font-face es verdaderamente un arte oscura y compleja que debe ser dominada" nos remite reiteradamente a un artículo publicado el 21 de octubre de 2009 el la página http://www.elwebmaster.com
El artículo en cuestión
Que no digo que sea el primigenio, pero sí anterior a este burdo copy/paste, que hasta las faltas ortográficas y de sintaxis respeta.

Muy feo, señor Curda, lo que ha hecho.
  #5 (permalink)  
Antiguo 19/10/2010, 09:37
 
Fecha de Ingreso: septiembre-2009
Ubicación: Queretaro
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Cita:
Iniciado por kseso? Ver Mensaje
O se modifica para otorgar los créditos (obligados) o diréctamente se borra este tema por se un plagio descarado.

Una sencilla búsqueda con la cadena :" El embebimiento de fuentes utilizando @font-face es verdaderamente un arte oscura y compleja que debe ser dominada" nos remite reiteradamente a un artículo publicado el 21 de octubre de 2009 el la página [url]http://www.elwebmaster.com[/url]
[URL="http://www.elwebmaster.com/general/embeber-fuentes-en-tu-sitio-web-la-guia-definitiva"]El artículo en cuestión[/URL]
Que no digo que sea el primigenio, pero sí anterior a este burdo copy/paste, que hasta las faltas ortográficas y de sintaxis respeta.

Muy feo, señor Curda, lo que ha hecho.
Tienes razon del copy paste ya que al momento de ir redactando encontré esa explicación no en el foro y para el ahorro de tiempo ya que declara casi exactamente lo que iba a escribir mejor fue el copy/paste por eso le coloque los ------------------- al inicio y al final pero si es de su preferencia coloco un quote completo :)

y los créditos reales y bibliografía estan en ingles ni tu super masterdelweb es el real amigo... kseso?

este es la bibliografia real: Becoming A Embedding Master, http://www.snook.ca/archives/html_and_css/becoming-a-font-embedding-master. October 7, 2007

Y bueno en que formato quieres la bibliografía en formato APA o en MLA o en cual otro, para complacer a uno cuando este tema la va a ayudar a muchos ya que de donde sale esta información no tiene tan excelente posicionamiento orgánico como este foro, asi que es para ayudar recuerda estamos en este foro para ayudar no para amedrentar y criticar de esa forma muchachito, por que fue muy burda tu forma de responder.

saludos cordiales.

Última edición por Curda; 19/10/2010 a las 09:47
  #6 (permalink)  
Antiguo 19/10/2010, 10:29
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Cita:
Investigue la estructura de los exploradores web y sus motores llegando a varias conclusiones de como solucionar este mayúsculo problema que se tiene al momento de hacer de una forma excelente el diseño ya que por medios de accesibilidad de los usuarios las tipografías cambian, y hay veces que queremos que queden las palabras a estilo y tamaño como quedarían en una imagen pero necesitamos que sean estas palabras en texto HTML

Pues como hacerlo aquí un pequeño manual.

Hace tiempo encontré una buena opción utilizando fuentes con formato *.pfr

pero el problema es de que pide la excusión de un ActiveX y el explorador Chrome quedaba bailando.

ahora se complementa con esta solucion:
Si esto no es adjudicarse el trabajo ajeno, que baje dios y lo vea...

No funciona aquí el 'el lo plagió primero, yo puedo plagiarlo ahora...'

Kseso tiene razón es lo primero que hice por eso supe que era un plagio.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #7 (permalink)  
Antiguo 19/10/2010, 10:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Sólo digo que ha querido hacer pasar como propio un trabajo ajeno. Y lo mantengo, pues hasta usted no ha tenido más remedio que reconocerlo:
Cita:
Tienes razon del copy paste...
Y lo que se suele hacer en este foro no es copiar (obviando la fuente), sino enlazar al artículo, como por ejemplo hizo hdennison al mencionar una de las personas que más y mejores artículos tiene sobre @font-face. Fuente e inspiración de otros muchos trabajos, tanto en inglés como castellano. Que también los hay.
O como se hace en las faq´s.

Pero tampoco es para dedicarle más energías al tema. Creo que todo ha quedado más que meridianamente claro.

P.D.: Por cierto, el formato "Portable Font Resource" (.pfr) sólo lo implementó Nestcape desde la versión 4, discontinuado desde Netscape Navigator 6 (según mencionan en distintos sitios).
  #8 (permalink)  
Antiguo 19/10/2010, 10:48
 
Fecha de Ingreso: septiembre-2009
Ubicación: Queretaro
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Bueno creo que no se comprende el punto.

Lo voy a comentar de nuevo...

Este foro tiene un mejor posicionamiento organico (SEO) que muchos otros blogs que se pueden encontrar en la internet, he tenido compañeros que tardan en encontrar respuestas tan utiles como esta por lo mismo, entonces el colocar esta solicion en este foro ayudara a esas personas a tener la respuesta de la mejor y rapida manera.

Y bueno necesito entonces una ayuda de un gran master y conocedor como tu kseso?, aquí dejo el enlace:
http://www.forosdelweb.com/f13/este-script-no-funciona-ie-si-demas-por-q-818299/
y de paso este:
http://www.forosdelweb.com/f77/funcion-ajax-funciona-solo-con-alert-752868/

Espero pronta respuesta.

Gracias
  #9 (permalink)  
Antiguo 19/10/2010, 11:01
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Curda, sigues con esas cosas? el asunto es que te adjudicas trabajo ajeno del que probablemente no comprendes nada, cuando hagas una 'Colaboración' con algún artículo, asegúrate de:

- Citar la fuente
- No adjudicártelo si no es tuyo

Creo que solo deberías dejar el enlace al artículo y ya señor 'investigador' =).
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #10 (permalink)  
Antiguo 19/10/2010, 11:19
 
Fecha de Ingreso: septiembre-2009
Ubicación: Queretaro
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Cita:
Iniciado por Dalvenjha Ver Mensaje
Curda, sigues con esas cosas? el asunto es que te adjudicas trabajo ajeno del que probablemente no comprendes nada, cuando hagas una 'Colaboración' con algún artículo, asegúrate de:

- Citar la fuente
- No adjudicártelo si no es tuyo

Creo que solo deberías dejar el enlace al artículo y ya señor 'investigador' =).
Ok señor peruano, dejemos ese tema en paz

Podría ayudarme en este tema:
http://www.forosdelweb.com/f13/este-script-no-funciona-ie-si-demas-por-q-818299/

tengo ese detalle ya hace algún tiempo.

gracias
  #11 (permalink)  
Antiguo 19/10/2010, 11:32
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Señor peruano... =S que tiene que ver eso?

A una persona tan chabacana como tú simplemente no la ayudo, pq? pq no sabes pedir ni sabes hablar, por cierto me parece patético que tengas problemas con eso... Así 'investigaste la estructura de los exploradores web'?

=) Saludos y tenga un buen día, lo dejo aquí.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #12 (permalink)  
Antiguo 19/10/2010, 15:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Implementacion y uso de tipografias no instaladas en un cliente web

Hola:

Cita:
Iniciado por Curda Ver Mensaje
Este foro tiene un mejor posicionamiento organico (SEO) que muchos otros blogs que se pueden encontrar en la internet, he tenido compañeros que tardan en encontrar respuestas tan utiles como esta por lo mismo, entonces el colocar esta solicion en este foro ayudara a esas personas a tener la respuesta de la mejor y rapida manera.
Basándose en esto que dice ¿Cómo es que no han encontrado este tema del propio foro? Guía: @font-face y creación de los .eot para IE

Mejor actitud la del Sr. Kseso? que no ha presumido de la autoría del artículo que la suya apropiandose del trabajo de otros.

Saludos.


Etiquetas: copipasteado, diseño, font, fuentes
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 1 personas




La zona horaria es GMT -6. Ahora son las 12:18.