Utiliser des polices “exotiques” sur un site web méthode 1 : sIFR3
Arial, Verdana, Georgia, Times New Roman, Trebuchet MS,… c’est à peu près toutes les polices utilisables sur le web. Difficile alors pour un webdesigner de se permettre plus de créativité dans la typographie.
Une solution est d’afficher une image en arrière-plan et de masquer le texte avec la propriété CSS text-indent: -5000em; pour sortir le texte de l’espace visible. Le problème c’est que cette solution manque de souplesse puisque si les textes changent il faut refaire les images.
div {
background: url(images.jpg);
text-indent: -5000em;
}
Maintenant, il existe plusieurs alternatives :
sIFR3 : la méthode flash
Cette solution utilise CSS, JavaScript et Flash pour afficher et mettre en forme le texte. Utiliser du Flash garantit d’avoir un affichage uniforme sur tous les navigateurs, mais impose aussi que le visiteur ait Flash d’installer et d’activer (quoique maintenant c’est une solution très courante).
sIFR3 est très simple à utiliser :
Télécharger la dernière version de sIFR3 ici
Ouvrez le fichier sifr.fla. A l’ouverture, double-cliquer sur la scène et modifier la police du texte par celle de votre choix. Nul besoin d’autre modification ici.
Exporter votre animation au format swf (fichier/exporter l’animation) et nommer la sifr.swf par exemple (vous pouvez laisser tel quel les paramètre d’exportation)
Ensuite, envoyer les fichiers suivants vers votre serveur :
- css/sIFR-print.css
- css/sIFR-screen.css
- js/sifr.js
- js/sifr-config.js
- flash/sifr.swf (c’est bien le fichier swf et pas le fla)
Si vous utilisez Wordpress mettez vos fichiers dans wp-content/themes/votre_theme
Maintenant, nous devons faire les liens vers les fichiers JavaScript et CSS :
<head> <link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="print" /> <script src="js/sifr.js" type="text/javascript"> <script src="js/sifr-config.js" type="text/javascript"> </head>
Arrivé ici, il nous reste à configurer le fichier sifr-config.js pour activer le remplacement du texte
//on définit une variable qui va chercher le fichier swf
var police = {
src: 'flash/sifr.swf'
};
//on active la police
sIFR.activate(police);
//on définit quel texte doit être remplacé
sIFR.replace(police, {
selector: 'h4#testSifr'
});
Pour éviter que le texte normal ne s’affiche on modifie le fichier sifr-screen.css
.sIFR-active h4#testSifr {
visibility: hidden; // on cache le texte normal
}
Si vous souhaitez styler votre texte, il faut éditer à nouveau le fichier sifr-config.js
sIFR.replace(police, {
selector: 'h4#testSifr'
,css: [
//on met en forme les liens
//(tout autre élément enfant peut être stylé span, em,...)
'a { color: #ce1769; }'
,'a:link { color: #81d548; }'
,'a:hover { color: #ce1769; }'
,'.sIFR-root {text-align: center; font-size: 35px;}' // On style l'élément lui-même
]
,wmode: 'transparent' //pas de couleurs de fond
});
Et le résultat de ce code :
Je suis un texte qui utilise sIFR3
Prochaine méthode : FLIR, la même chose mais sans le Flash…
