Cufon fuentes Joomla Hosting

Por Michael Soriano en fragmentos de 13 de octubre de, 2009 70 Comentarios

Soy un gran fan de Woothemes. Parece que cada vez que vienen a cabo con un tema - que empujan los límites de diseño de páginas web. Echar un vistazo a su última creación: Terapia - No puedo dejar caer en amor con los gradientes de fondo fino, transparencias suave y perfecta y agradable bordes redondeados. Pero lo que realmente me gusta de la terapia es que es increíble la tipografía. Me dije: “eso es excelente utilización de sIFR”. Así que la derecha hace clic en un título de la entrada, esperando ver la entrada “Acerca de Macromedia Flash” -, pero no lo vi. Así que le pregunté a mi auto confusa: “si no es sIFR, entonces ¿cuál es la conversión de todo este texto dinámico?”

Cufon fuentes de hosting joomla mismo que usted

Inspecciono elemento de Firebug - entonces veo span class “Cufon” en todas partes.

Así que lo que en el mundo es Cufon?

Cufon se define como “la sustitución rápida de texto con el lienzo y VML”. También afirma ser una buena alternativa a sIFR - que es, a aquellos que no están familiarizados - significa Scalable Inman Flash Replacement. sIFR es la tecnología utilizada por los diseñadores web para sustituir el texto dinámico con fuentes seguras no web. Aunque sIFR ha hecho un trabajo bien con la sustitución de texto - que ha demostrado ser bastante complicado de configurar. He usado sIFR en unos pocos proyectos en el pasado y que admitir que no es lo más fácil para ponerse en marcha. Además de eso - sIFR parece un poco buggy, así como ralentiza carga la página. Estas son las consecuencias graves a considerar para el precio de la utilización de una fuente única para sus páginas.

Así que siguió adelante y trató Cufon. Para mi asombro, los siguientes pasos es todo lo que se necesita para “completamente” Cufonize sus páginas web. * Perdona el uso del término “cufonize” - puede sonar divertido, pero después de probar estos pasos, también se “cufonize” sus páginas.

Paso 1: Obtener Cufón

Lo primero que se necesita es descargar el archivo de JavaScript, que es responsable de la prestación de su fuente personalizada dentro de su HTML. Cabeza en cufon.shoqolate.com/generate/~~V~~singular~~3rd a la derecha y haga clic en la pestaña “Descargar” - seleccione “Guardar enlace como ...” Guardar Cufon-yui.js en un directorio local en su máquina.

Paso 2: Generar la fuente

En la misma página en cufon.shoqolate.com/generate/ - haga clic en el campo “tipo de letra regular” - y vaya a la fuente que desee en su máquina local.

El resto de los campos de carga son opcionales. Salí de todos ellos por defecto para el bien de hacer este tutorial corto. Sólo asegúrese de que - está utilizando una fuente que es de fiar de usar, marque los EULA y los términos del acuerdo. Haga clic en el “Vamos a hacer esto” botón al final de esa página.

Esto debería generar una fuente personalizada código javascript para usted - en función del tipo de letra. En mi caso, tomé algo muy poco extraordinaria: Gigi.TTF - que produjo un fichero llamado Gigi_400.font.js.

fuentes Cufon Joomla Hosting de todo lo que necesita para usted

Vaya por delante y guardar este archivo en el mismo directorio donde guardó el archivo de núcleo Cufón-yui.js y estamos listos para construir su página:

Paso 3: Cufonize su página

Todo lo que tiene que hacer a partir de este punto es vincular a estos archivos JavaScript en la sección de cabecera de su HTML. También asegúrese de que Cufon-yui.js se llama antes del archivo font.js:

Para comenzar el proceso de reemplazo - crear una secuencia de comandos personalizada, como a continuación:

El script de arriba está diciendo la Cufon para reemplazar todas las etiquetas H3 y P a nuestra fuente personalizada.

Tenga en cuenta que si desea orientar los elementos específicos en su página de la misma forma que asigne clases CSS e IDS, usted tiene que utilizar un marco como jQuery que dejaré hacer tal cosa. Para descargar jQuery, ir a docs.jquery.com/Downloading_jQuery. Asegúrese de que usted se conecta a este archivo antes de las centrales Cufon-yui.js en su cabecera.

Con la biblioteca jQuery en su lugar, ahora puede seleccionar los elementos más específicos en su página (hashtags para los ID y los períodos de clases). Consulte el código de ejemplo a continuación:

El código anterior Cufonize sólo las etiquetas H3 con el ID de “convertir-me”, y las etiquetas P con el ID de “convertir-yo-también”.

Conclusión:

Eso es básicamente la misma! Eso es todo lo que necesita para que pueda utilizar cualquier fuente que te gusta en sus páginas web. Lo que más me gusta de Cufon es que es rápida y funciona. Usted también encontrará que las propiedades generales de CSS, como el color, tamaño y posicionamiento todavía se aplica en la fuente transformado. Para obtener más información sobre los detalles de estilo Cufón - ver wiki.github.com/sorccu/cufon/styling.

Tanto respecto a las personas que crearon Cufon. Estoy seguro de que esto marca una nueva tendencia en tipografía web. Para la gente de Woothemes: mantener empujando los límites - su trabajo es pura inspiración para artistas de todo el mundo web.

¿Quién está utilizando Cufon?

La siguiente lista de sitios web ya están utilizando la sustitución de texto Cufon en sus páginas:

Academia Internacional de Rugby

Dominio de la red - Alinear sus mensajes WordPress perfectamente con PHP y CSS

Crear una página individual de la cartera desde cero - Parte 1: Photoshop maqueta

70 Comentarios

25 de octubre 2009 a las 7:18 am

Tengo plan para tratar cufonize en breve y simplemente ver a su gran artículo. Gracias por compartir.

28 de octubre de 2009 a las 11:15 am

Estoy usando el plugin WP-Cufón (www.tobias-battenberg.de/wp-cufon/) en dos sitios de WordPress. Bastante bueno, pero no perfecto. Hay un ligero retraso cuando se carga la página de la fuente que se presentan y el “Hack” no parece cubrirlo. También tuve problemas con él trabajando en la página de inicio y otras páginas como el tema que estaba usando ellos codificado de manera diferente.

Hacer esto hace tres meses (desear para un artículo como éste) que tenía problemas para convertir la fuente a js creo que fue. Tenía que hacerlo un par de veces para hacerlo bien.

Este sitio está casi listo y se puede ver el uso de una fuente Museo_300 libre:
lightonsolutions.com/

Voy a publicar el otro sitio ejemplo cuando esté terminado.

Gracias de nuevo por el artículo.

28 de octubre 2009 a las 24:19

¡Tocar el asunto exacto! la fuente Museo_300 es una hermosa fuente. ¡Buen trabajo!

4 de noviembre 2009 a las 9:40 am

Sólo quiero saber cómo aplicar “id” y “clase” en Cufon.

por favor, dar en breve y también url ejemplo SITOR.

4 noviembre 2009 a las 9:56 am

- Usted apuntar los elementos mediante el uso normal de javascript jquery o selectores. Me parece la forma en jQuery a ser más fácil.

Por ejemplo. Digamos que quiere cufonize todos los títulos H3 en su página con una clase de “subtítulo”, le dice al script: cufon.replace ( ‘h3.subtitle’)

4 noviembre 2009 a las 10:02 am

hola gracias por la respuesta Quik.
pero algunos problemas.

Estoy utilizando esta code..but no conseguir ningún cambio.

Cufon.replace ( ‘h3.subtitle’, textShadow: ‘2px 2px # 666 ',
fontSize: ‘17px’,
Color: ‘-linear-gradiente (#fff, 0,2 = # fff, 0,5 = # fff, #fff)’,
flotar: textShadow: ‘2px 2px # 9d9d9d’,
Color: ‘-linear-gradiente (# d4d4d4, blanco)’

6 noviembre 2009 a las 5:25 am

hola gracias por la respuesta Quik.
pero algunos problemas.

Estoy utilizando esta code..but no conseguir ningún cambio.

Cufon.replace (’h3.subtitle’, textShadow: ‘2px 2px # 666 ',
fontSize: ‘17px’,
Color: ‘-linear-gradiente (#fff, 0,2 = # fff, 0,5 = # fff, #fff)’,
flotar: textShadow: ‘2px 2px # 9d9d9d’,
Color: ‘-linear-gradiente (# d4d4d4, blanco)’

23 de diciembre 2009 a las 9:31 am

Gracias por este tutorial muy útil “a toda prueba”. Tengo un cliente que me hizo algunas preguntas en torno a las técnicas de reemplazo de texto, voy a darle su enlace para que pueda leer por sí mismo.

Por cierto comparto sus sentimientos sobre WooThemes, podría ser parcial, ya que soy un beta tester para ellos

27 de julio 2010 a las 18:30

buen artículo!
i utilizado Cufon en conjunto con PHP y jQuery en un sitio de la agencia de viajes recientemente - funciona muy bien!
Lo utilicé para el estilo de texto dinámico en un rotador de características y dinámicas especiales en la página principal (shipsandtripstravel.com) y se utiliza múltiples fuentes en su página de testimonios (shipsandtripstravel.com/about/testimonials.html)

28 de julio 2010 a las 11:28 am

@Gregg - que es un sitio impresionante. me dan ganas de viajar

29 de abril 2012 a las 14:54

Muchas gracias. Divertido encontré su puesto porque lo hice exactamente lo mismo que hizo ... pensado una fuente tuvo que ser un archivo img hasta que use herramienta de desarrollo de Google y oído de Cufón por primera vez. ¿No es mejor utilizar la biblioteca jQuery de Google aunque ??

// Puede especificar números de versión parciales, como “1” o “1.3”,
// con el mismo resultado. Si lo hace, cargar automáticamente el
// última versión coincidente que el patrón de revisión parcial
// (por ejemplo 1.3 se carga 1.3.2 hoy y 1 cargaría 1.7.2).
google.load ( “jquery”, “1.7.2”);

google.setOnLoadCallback (function () // Lugar código de inicio aquí en lugar de ready $ (document) ()
>);

Saludos y mantienen esta gran contenido que fluye!

Steve
Kingston, ON, Canadá

30 de abril 2012 a las 9:50 am

¿alguien tiene problemas con Cufon? i “cufonized” mi fuente, hice todo para hacer que funcione en mi sitio web y que ... la fuente Cufon cambiado todo. las cosas ya no existe en el lugar correcto son? ocurrió a nadie todavía?

5 mayo 2012 a las 7:16 am

lo CUFIN fuente está utilizando la terapia?

¡Mira este video!

Artículos relacionados

El mejor generador de mapa de sitio para Joomla HostingCaracterísticas: - Genera archivos sitemap.xml en línea gratis - Puede procesar un número ilimitado de páginas * - Proporciona Google mapa / XML mapa del sitio validador - Informes enlaces rotos - complementaria, en ningún ...
Gameon fjt Joomla HostingGracias por la información Michaelson. He descargado Firebug y es un recurso increíble! Yo era capaz de localizar la línea de código en el archivo CSS. Sin embargo, un nuevo problema ha surgido: el template.css ...
Pdf incrustar 15 Joomla HostingJoomla 2.5 ha llegado a su fin de vida como para 12/31/2014. Tenga en cuenta que esto puede ser un riesgo para la seguridad de su sitio web. Puede ver más información sobre el final de la vida aquí. Debido a sus...
El uso de dos plantillas en Joomla alojamientoEn Joomla 2.5 / 3, puede utilizar más de una plantilla de diseño en su página web. Esto significa que se puede crear una página web con los grupos de sub-páginas, o incluso sub-páginas individuales que tienen una única ...
Fuentes XML parser Joomla Hosting¿Qué es el archivo XML? El Extensible Markup Language o XML es uno de los formatos abiertos más utilizados para el almacenamiento, la estructuración, la manipulación y el transporte de datos. Uno de los principales...