Friday 27 September 2024
Font Size
   
Wednesday, 22 December 2010 09:15

Comparer et installer polices de caractères exotiques en HTML (JavaScript + CSS)

Rate this item
(0 votes)
Comparer et installer polices de caractères exotiques en HTML (JavaScript + CSS)

La question des polices de caractère dans les pages web a longtemps été l’objet d’un débat enflammé et parfois difficile entre les webdesigners et leurs clients.

Il est en effet souvent difficile de faire comprendre à quelqu’un qui n’est pas au fait des contraintes du web qu’on ne peut pas utiliser n’importe-quelle police, et qu’il faut respecter une convention liée au fait que les pages web affichent les textes en allant chercher dans les polices disponibles sur l’ordinateur de l’internaute.

Du coup le choix est quelque peu limité, et le web affiche donc les textes dans une petite poignée de polices dont on sait qu’elles sont à peu près disponibles sur tous les ordinateurs, à savoir Arial, Verdana, Helvetica et autres Georgia. Ou Comic sans MS si vous y tenez vraiment.

Il existe des méthodes pour travailler un peu les typos et faire par exemple ressortir les titres. La plus simple est d’utiliser une image, avec les inconvénients que cela suppose : lourdeur de mise en oeuvre, impossibilité de gérer du exte dynamiquement, handicap pour le référencement, etc… L’autre méthode consiste à utiliser un script comme siFR qui transforme le texte en « image » au format Flash. Le rendu graphique est très flatteur, mais il y a là encore quelques inconvénients, et notamment ceux liés à l’utilisation de Flash.

Comparer et installer polices de caractères exotiques en HTML (JavaScript + CSS)

Sinon il y a la méthode JavaScript + CSS, plus « universelle » puisque normalement compatible avec tous les navigateurs. C’est celle qu’a utilisée Viktor Miranda, un développeur suédois pour mettre en place Font Comparer, un outil qui permet d’afficher à la volée et simultanément un texte dans plusieurs polices de caractère en HTML, mais également de choisir et d’installer celle(s) que l’on veut sur son site en étant sûr qu’elle s’afficheront de la même façon chez tous vos visiteurs, quelles que soient celles installées sur leur machine. Quelques options sont disponibles, comme la couleur, la taille, la couleur de fond et l’effet d’ombre.

En fait le service utilise une API de Google (Google Fonts) pour générer le JavaScript et le CSS correspondant à la police de caractère choisie. C’est aussi l’inconvénient du système : le morceau de code JavaScript que vous installez dans votre header fait appel à un script externe, ce qui ne vous met pas à l’abri d’un changement en cas de fermeture de celui-ci.

Cela étant, avec Google le risque est quand même relativement limité.

Articles sur le même sujet :


Article original écrit par Eric et publié sur Presse-Citron, le 22/12/2010. | Lien direct vers cet article | © Presse-citron.net - 2010
NOUVEAU : Trouvez gratuitement un développeur / graphiste / référenceur freelance avec Codeur.com

image
image

image

Authors: Eric

pour en savoir plus...

French (Fr)English (United Kingdom)

Parmi nos clients

mobileporn