Techniques et outils pratiques de remplacement dynamique de l'image

En ce qui concerne la conception Web, la créativité en matière de conception ne doit pas être freinée par le choix limité de polices Web prises en charge que nous appelons la polices Web sécurisées. Les concepteurs doivent pouvoir utiliser librement les polices qu'ils préfèrent pour les titres et le contenu..

En 2005, le remplacement dynamique d’images a été rendu populaire grâce à une technique appelée Remplacement du flash Inman évolutif (sIFR). Développé par Shaun Inman, sIFR tire parti de Javascript et d'Adobe Flash pour permettre aux concepteurs Web d'utiliser les polices personnalisées de leur choix sur le site Web tout en maintenant la visibilité pour ceux qui ne possèdent pas cette police. Et comme le Web continue d'évoluer, nous avons aujourd'hui plus de solutions alternatives utilisant différentes technologies, juste au cas où vous ne seriez pas tout à fait fan de Flash..

Sans plus tarder, jetons un coup d'oeil à certains des techniques pour réaliser des remplacements d'image dynamiques.

Techniques couramment utilisées

Voici quelques-unes des techniques les plus couramment utilisées pour le remplacement dynamique d'images.

Remplacement du flash Inman évolutif (sIFR)

sIFR est l'une des méthodes les plus populaires pour intégrer des polices personnalisées sur des sites Web. Il utilise Javascript et Flash pour générer une police de caractères personnalisée pour votre site Web et permet de sélectionner la police convertie. De plus, les caractères convertis restent sous forme de texte dans les codes sources, ce qui permet au moteur de recherche de les analyser.

SIFR 2 (recommandé) correspond à la version stable actuelle. Toutefois, si vous envisagez de mettre en œuvre sIFR, vous devez également savoir que siFR 3 la version bêta est également disponible au téléchargement. C'est peut-être un peu bogué, mais au moins cela résout le problème d'expansion des polices SIFR 2.

Outils pour sIFR qui pourraient être utiles:

sIFRvaultsIFRvault est un référentiel des polices sIFR que vous pouvez télécharger.
générateur sIFROutil en ligne qui vous permet de créer des fichiers .swf sIFR en quelques clics de souris. Téléchargez simplement la police TTF de la police que vous souhaitez convertir, prévisualisez et téléchargez.
Convertir des polices en sIFRTéléchargez une police .TTF et ce site les fera convertir en fichier Flash sIFR.

sIFR Lite

Le SIFR original est 22k, donc Dave décidé de le retravailler en utilisant une approche plus orientée objet, et le résultat? 3x plus petit à 3,7k.

Remplacement de texte dynamique PHP + CSS (P + C DTR)

Comme son nom l'indique, il s'agit d'une méthode de remplacement de texte utilisant PHP et CSS qui utilise la méthode originale décrite par Steward Rosenberger. C’est aussi une amélioration de la version précédente développée par R. Marie Cox cela ne supporte pas le retour à la ligne ni les balises internes. Une autre chose intéressante à propos de P + C DTR est que le texte de l'image peut être personnalisable avec des balises CSS..

typeface.js

Ce qui rend typeface.js La particularité est qu'ils n'utilisent que Javascript pour incorporer des polices personnalisées et que le style peut encore être personnalisé avec HTML et CSS, aucun Flash n'est requis. Il est open source et supporte la plupart des navigateurs que nous utilisons actuellement, que ce soit Safari, Firefox, IE (6 ou plus)..

Personnellement, après quelques expériences avec typeface.js, nous pensons qu'il pourrait y avoir une marge d'amélioration. Premièrement, les polices ont tendance à être légèrement différentes d’un navigateur à l’autre. Si vous utilisez typeface.js, nous vous suggérons d'effectuer une vérification entre navigateurs avant de supposer que ce que vous voyez dans Firefox sera ce que vous voyez dans Safari. Le texte ne peut pas non plus être sélectionné avec typeface.js.

Les polices personnalisées dans typeface.js ne sont pas compilées; ce qui signifie que les utilisateurs peuvent télécharger les polices. Cela pourrait conduire à un problème de copyright. Il est conseillé de vérifier soigneusement que les polices que vous utilisez sont correctes pour la redistribution..

Cufon

Aucun flash requis, Cufon est une excellente alternative au sIFR et sa mise en œuvre est simple. Tout d'abord, vous utilisez le générateur Cufon pour générer et personnaliser la police que vous souhaitez, puis vous insérez le code Javascript Cufon dans votre code source et vous indiquez au script quels sélecteurs vous souhaitez personnaliser..

Le plus gros problème avec Cufon serait le problème juridique de l'utilisation de ces polices personnalisées en ligne. Comme il est intégré à Javascript, il peut être facilement extrait par quiconque visualise le code source. Les polices personnalisées Cufon ne sont pas sélectionnables, c'est l'autre désactiver.

Facelift

Aussi connu sous le nom Remplacement d'Image de Facelift (FLIR), C'est une autre bonne méthode de sIFR qui ne nécessite pas de Flash. On dirait que toute autre alternative frappe dans le numéro Flash de sIFR.

Facelift utilise PHP et la bibliothèque GD de PHP. Ils héritent du problème hérité des remplacements de polices personnalisés - impossible de sélectionner le texte. A part ça, on trouve ça super aussi.

Plus de méthodes

Les techniques ci-dessus sont peut-être plus largement utilisées, mais nous avons également noté d'autres méthodes pour convertir votre texte en superbes polices de caractères personnalisées..

Type Select

TypeSelect exploite typeface.js, jQuery, le canevas, toDataURL, les propriétés d’arrière-plan CSS et le texte superposé réel pour créer une police de caractères personnalisée sur votre site Web. La sélection de texte fonctionne sur Firefox, Safari et même Chrome mais pas IE.

Remplacement d'image swf (swfIR)

swfIR vous donne la possibilité d'appliquer un assortiment d'effets visuels à toutes les images de votre site Web. Par exemple, vous pouvez ajouter des images sur votre site Web et swfIR ajoutera une bordure plus arrondie, fera pivoter le positionnement ou même y ajoutera des ombres..

Neuf techniques de remplacement des images CSS

Ce ne sont pas des remplacements de texte dynamiques, mais Chris Coyier démontre pas moins de neuf techniques CSS différentes pour remplacer du texte par des images; chacun avec un bulletin indiquant la condition de - que se passe-t-il si les images sont activées / désactivées, CSS est activé / désactivé.

Graveur de police

Graveur de police Tirez parti du Scalable Inman Flash Replacement (sIFR) pour changer vos titres en polices personnalisées. Tout ce que vous avez à faire est de trouver la police, de la sélectionner et d'insérer le code dans l'en-tête. Votre titre changera en un rien de temps..

WordPress + Remplacement d'image dynamique

Si vous êtes un utilisateur de WordPress à la recherche d'une solution de remplacement d'image dynamique pour le titre ou même le contenu de votre blog, il y a des chances qu'il existe un plugin pour eux. Voici quelques plugins de remplacement de texte que nous connaissons.

sIFR WordPress Plugin - WP sIFRWP sIFR a été créé pour éliminer les complications liées à l’obtention de polices personnalisées sur un site WordPress. Avec WP sIFR, il vous suffit de télécharger votre fichier de police SWF dans le répertoire du plug-in, puis de vous connecter, de l'activer et de configurer ses styles, le tout dans le panneau Paramètres..

Cufon WordPress Plugin - WP-CufonLa seule chose à faire est de convertir vos fichiers de polices et de les télécharger dans le répertoire plugins. Vous pouvez activer les objets que vous souhaitez faire remplacer dans le menu Admin de WordPress.

Plugin Wordpress pour remplacement d’images Facialift (FLIR)FLIR pour WordPress est convivial SEO et rend l'image dans le navigateur uniquement si JavaScript est activé. Votre code HTML / XHTML reste inchangé, laissant vos balises head lisibles par les moteurs de recherche et la page lisible par ceux sans JavaScript.

Panneau de configuration du brûleur de policesle Graveur de police Le plug-in du Panneau de configuration vous permet d’ajouter facilement à votre thème WordPress l’une des plus de 1 000 polices gratuites disponibles sur le site Web de Font Burner..