Share
La semana pasada, Philo te mostró cómo implementar sIFR3. Esta vez, les mostraré cómo implementar Facelift Image Replacement (o FLIR), una alternativa a sIFR que no requiere flash.
Tenga en cuenta que la demostración utiliza fuentes diferentes a las utilizadas en el tutorial por razones de copia correcta.
El primer paso es descargar FLIR. Descomprima la descarga y coloque la carpeta dentro (facelift-1.1.1) en algún lugar de su servidor web. He cambiado el nombre de la carpeta a "cambio de cara" para facilitar las cosas.
Dentro de la carpeta de lavado de cara hay un archivo Javascript llamado "flir.js". Puede elegir dejarlo allí o moverlo a otra parte, como una carpeta centralizada para archivos Javascript. Para este tutorial, lo haremos y lo moveremos a una carpeta llamada "js" en el directorio raíz de nuestro sitio.
Ahora abre flir.js en tu editor de texto favorito y ve a la línea 30. Debería verse así:
,camino:"
Necesitamos poner una ruta absoluta o relativa a nuestro directorio de facelift entre las dos comillas simples. Sin embargo, las rutas relativas son relativas a la página y no al archivo flir.js, lo que puede causar algunos problemas con los sitios que usan mod_rewrite para crear URL bonitas. La manera más segura de hacer que todo funcione es proporcionar un camino absoluto..
,ruta: '/ path / to / facelift /'
Abra la página a la que desea agregar FLIR y agregue lo siguiente entre las etiquetas de cabecera para adjuntar flir.js:
Luego agregue lo siguiente justo antes de la etiqueta del cuerpo de cierre:
Este paso es bastante fácil. Descarga las fuentes que quieras utilizar. Estaré usando Delicious, Tallys, y Tusj. Coloque sus fuentes en la carpeta de "fuentes" dentro de la carpeta "facelift". Abre config-flir.php y encontrarás un bloque de código que se parece a esto:
// Cada fuente que desee utilizar debe tener una entrada en la matriz de fuentes. $ fonts = array (); $ fonts ['tribalbenji'] = 'Tribal_Font.ttf'; $ fonts ['antagea'] = 'Antagea.ttf'; $ fonts ['illuminating'] = 'ArtOfIlluminating.ttf'; $ fonts ['bentham'] = 'Bentham.otf'; $ fonts ['geo'] = 'Geo_Oblique.otf'; $ fonts ['puritan'] = 'Puritan_Regular.otf'; $ fonts ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ fonts ['promocyja'] = 'Promocyja.ttf'; $ fonts ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ fonts ['animaldings'] = 'Animal_Silhouette.ttf'; // La fuente irá por defecto a la siguiente (ponga su fuente más común aquí). $ fonts ['default'] = $ fonts ['puritan'];
Como probablemente pueda ver en los comentarios, cada entrada en la matriz $ fonts es una fuente en la carpeta de fuentes. La clave de matriz entre los corchetes es lo que usamos en nuestras declaraciones de CSS cuando queremos usar la fuente. Añadamos las fuentes que descargamos anteriormente..
$ fonts ['ffftusj'] = 'FFF Tusj.ttf'; $ fonts ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Lo que se asigne a $ fonts ['default'] se utilizará si no se especifica una fuente. Hagamos de Delicious Heavy el predeterminado.
$ fonts ['default'] = $ fonts ['deliciousheavy'];
Hay una serie de otras configuraciones en el archivo config-flir.php pero se pueden dejar solos. Lo que cada configuración hace es bastante autoexplicativo y hay comentarios si desea modificarlos.
Por defecto, FLIR hará reemplazos de imagen solo para encabezados. Puede especificar qué se debe reemplazar al pasar una matriz de selectores de CSS a la función FLIR.auto () que agregamos en el paso 1.
FLIR.auto (['h1', 'h2', 'h3.alert', 'strong # important']);
Esto le dirá a FLIR que aplique el reemplazo de imagen a las etiquetas h1, las etiquetas h2, las etiquetas h3 con una clase de "alerta" y las etiquetas fuertes con una identificación de "importante".
Ahora todo lo que tenemos que hacer es aplicar estilos CSS como normal. Use las claves de la matriz $ fonts como la fuente en su declaración CSS para usar esa fuente. Permite aplicar Tusj a todas las tareas h1, Delicious Heavy a todas las etiquetas h2 y Tallys a todas las etiquetas h3 con una clase de alerta.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
¡Eso es! Las etiquetas fuertes con un identificador de "importante" retrocederán en la fuente predeterminada que especificamos en config-flir.php, que en este caso es Delicious Heavy. El texto de la imagen generada se escalará a cualquier tamaño de fuente que se especifique en el CSS. Los colores CSS también se llevarán a cabo, pero las transformaciones de texto no lo harán..
Aunque FLIR es una solución bastante clara para el reemplazo de imágenes de texto, hay algunos problemas menores. La biblioteca de PHP GD no muestra los detalles finos muy bien, lo que es bastante notable en la fuente Tusj. El texto superior se representó en Photoshop y el texto inferior se representó en la biblioteca PHP GD utilizada por FLIR.
Otra desventaja de FLIR es que requiere un servidor web con PHP y la biblioteca GD. Sin embargo, la mayoría de los hosts tienen ambos, por lo que esto es insignificante.
Un beneficio de FLIR sobre sIFR, su principal competidor, es que es más fácil de implementar y no requiere Flash para crear o ver.
Tanto FLIR como sIFR son soluciones excelentes y le servirán bien. La mayoría de los visitantes podrán ver ambos sin muchos problemas, pero para los pocos en el borde de la curva de campana que no tienen Flash, FLIR podría ser una mejor solución.
Accentsconagua