Share
CSS 3 está en el horizonte, y todos nos estamos emocionando. Gracias a las últimas actualizaciones del navegador, los desarrolladores pueden comenzar a trabajar con nuevas propiedades que ahorran tiempo, como @ font-face. Desafortunadamente, la disponibilidad de estas funciones se limita a una pequeña fracción de nuestra base de usuarios general. Al menos durante el próximo año más o menos, tendremos que seguir utilizando las alternativas de Flash y Javascript al incrustar fuentes..
Por suerte, un nuevo contendiente, Cufón, ha hecho que el proceso sea increíblemente simple. ¿Qué lo hace diferente? En lugar de Flash, utiliza una mezcla de lienzo y VML para representar las fuentes. En solo unos minutos, demostraré cómo usar cualquier fuente que desee en sus aplicaciones web. Emocionado?
Visite el sitio web de Cufón y haga clic derecho en el botón "Descargar" en la parte superior. Elija "Guardar como" y colóquelo en su escritorio.
Para poder funcionar, necesitamos usar la utilidad de conversión de fuentes en el sitio web. Alternativamente, puede descargar el código fuente y convertir sus fuentes localmente. Para los propósitos de demostración, he elegido usar una fuente desagradable: "Jokerman". Nota: usuarios de Windows: es posible que tenga que copiar la fuente de su carpeta "FONT" en el escritorio para que esto funcione..
Si lo desea, también cargue los archivos en cursiva y negrita también..
A continuación, deberá elegir qué glifos se incluirán. No seas tan rápido simplemente "ELEGIR TODO". Si lo hace, aumentará considerablemente el tamaño del archivo JS. Por ejemplo, probablemente no necesitamos todos los glifos latinos; así que asegúrate de que no estén marcados. En mi caso, he comprobado los que ves a continuación..
Cufón le permite designar una URL específica para su archivo, para aumentar la seguridad. Es extremadamente importante que se asegure de tener los privilegios adecuados para usar una fuente. REFERIR AQUÍ para revisar los términos. Si es ventajoso, escriba la url de su sitio en este cuadro.
Ya que estamos empezando, puede dejar las dos últimas secciones en sus valores predeterminados. Acepte los términos y haga clic en "Vamos a hacer esto". A continuación, aparecerá un cuadro de descarga que le preguntará dónde guardar el script generado. Una vez más, guárdelo en su escritorio para recuperarlo fácilmente.
El siguiente paso es preparar nuestro proyecto. Cree una nueva carpeta en su escritorio, agregue un archivo index.html y arrastre sus dos archivos Javascript en.
Abra el archivo de índice en su editor de código favorito, agregue las etiquetas HTML básicas y luego haga referencia a sus dos archivos Javascript justo antes de la etiqueta del cuerpo de cierre (también puede agregarlos a la sección principal).
Ahora, tenemos que decidir qué texto debe ser reemplazado. Como nuestro documento aún está en blanco, no dude en ensuciarlo con etiquetas y texto aleatorios. Intentemos reemplazar la fuente predeterminada en todas las etiquetas H1 con Jokerman.
Cuando llamamos al método "reemplazar", podemos agregar una cadena que contenga el nombre de la etiqueta que deseamos reemplazar, en nuestro caso, todas las etiquetas H1. Guarda el archivo y visualízalo en tu navegador..
Como siempre, IE necesita un poco más para jugar bien con los demás. Si ve esta página en IE, notará un ligero flickr / retraso antes de que se procese la fuente. Para remediar, simplemente agregue:
Imaginemos que quieres tener más control sobre tu selector. Por ejemplo, quizás no desee cambiar TODAS las etiquetas H1, sino simplemente las que están dentro del encabezado de su documento. Cufón no tiene su propio motor selector incorporado. Esta función se omitió para mantener el tamaño del archivo lo más pequeño posible. Aunque esto puede parecer una caída al principio, en realidad es una gran idea. Teniendo en cuenta la ubicuidad de los marcos de Javascript últimamente, no hay necesidad de duplicar. Revisaremos dos métodos para apuntar a elementos específicos..
Si no va a utilizar un marco JS en su proyecto, simplemente usaremos:
Accentsconagua
Cufon.replace (document.getElementById ('header'). GetElementsByTagName ('h1')); El código anterior dice: "Obtén el elemento que tiene un ID de" encabezado ". Luego, busca todas las etiquetas H1 dentro de este elemento y" sustitúyelos "por nuestra nueva fuente..
Para llevar a cuestas el motor selector de jQuery, solo necesitamos importar jQuery antes de Cufón..
Cufon.replace ('# header h1'); ¡Es tan simple como eso! Tenga en cuenta que DEBE importar jQuery ANTES de su secuencia de comandos Cufón para que este método funcione.
Lo creas o no, ¡has terminado! ¡Con solo unas pocas líneas de código simple, puede usar cualquier fuente que desee! Solo asegúrese de tener permiso y que cumpla con las licencias de tipo Foundries.
La principal preocupación desde la perspectiva del tipo de fundición parece ser que el script de tipo de letra generado por Cufón podría usarse para aplicar ingeniería inversa a la propia fuente.
-Cameron moll
¿Cuáles son tus pensamientos? Tener un método mejor con el que no estoy familiarizado.?
