Utiliser des polices “exotiques” sur un site web methode 1 : sIFR3
sIFR, la méthode FLASH
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. Je vous en proposerais 3 :
- sIFR : méthode flash (sur cette page)
- FLIR : la méthode PHP
- Typeface.js : méthode JavaScript uniquement
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
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.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.css" type="text/css" media="screen" /> <script src="js/sifr.js" type="text/javascript"></script> <script src="js/sifr-config.js" type="text/javascript"></script> </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
});
Attention à l’unité de la taille de police, la méthode sIFR ne comprend que les valeurs en pixels.
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…
[mise à jour du 06/11/2008] : Voir la méthode FLIR
Articles sur le sujet :
Flux RSS Articles similaires
- Utiliser des polices “exotiques” sur un site web methode 2 : FLIR - 5 décembre 2008
- Utiliser des polices “exotiques” sur un site web methode 3 : Typeface.js - 9 décembre 2008
RSS
Contact
4 commentaires
BONJOUR DEBORAH
Peut être pouvez-vous m’aider, je cherche depuis 3 jours à appliquer le script sIFR à ce type de page sur mon site http://www.frank-kappa.com/work/ afin de le charter, la typo que je souhaite employer s’appelle spillmilk, je ne sait pourquoi, je n’y arrive pas, mes connaissances en code sont succintes, pouvez-vous m’aider pour organiser le code de ma page html ? Cette page est générée par lightroom à l’origine.
Un grand merci & bonne soirée
Bonjour Frank,
Je vous propose d’appliquer la méthode FLIR. J’ai expérimenté les 2 méthodes et FLIR est plus souple et plus simple à mettre en oeuvre.
Vous devriez arriver à vos fins avec cette solution.
Bonjour, est-il possible que les fichier suivant n’existe plus dans la derniére version sIFR ?
•css/sIFR-print.css
•css/sIFR-screen.css
Car dans la derniére version seul ce fichier est présent.
•css/sIFR.css
Bonjour Majid,
Après vérification, il n’y a bien dans la dernière version de sIFR3 qu’un seul fichier CSS. Ce fichier regroupe les styles pour l’écran comme pour l’impression. Plus besoin maintenant d’appeler 2 feuilles de styles, sifr.css suffit! Je met donc à jour mon post.
Les autres fichiers restent identiques.
Laisser un commentaire