DEVENIR-WEBMASTER.COM Log In
 8
close

Les polices de caractères

Visiter ma chaine Youtube

# Quel est le problème ? close

Pendant longtemps les internautes ont visualisé leurs pages web en utilisant les polices de caractères qui étaient disponibles sur leurs propres machines. Evidemment la liste des polices disponibles variait d'une machine à l'autre. Cette situation a obligé les développeurs a se limiter à un tronc commun de polices censés être disponibles sur toutes les machines. On a appelé ce tronc commun les polices Web Safe. Il n'y avait pas d'autre moyen de procéder.

En 2010 Google a démarré la mise en place d'un service appelé les Google Fonts. Ce service permet à un internaute qui récupère le code d'une page web de récupérer en même temps la police nécessaire à sa visualisation.

Aujourd'hui ces deux systèmes coexistent et on va les étudier tous les deux.

# Rappel de Typographie close

Les polices sont réparties en familles génériques selon qu'elles ont ou pas certaines caractéristiques.

Par exemple les polices avec sérif ont un empattement que les polices sans sérif n'ont pas. Ci dessous je prends une police arial pour le sans sérif et une Times New Roman pour la police avec sérif.

Les polices avec ou sans sérif

Les polices monospace ou à chasse fixe utilisent le même espacement pour chaque caractère. Ici je compare une Arial à une Courier New qui est monospace.

Les polices monospace

Il y a aussi les polices cursives pour désigner les polices qui essaient d'imiter l'écriture humaine.

Police cursive

# A quoi vont servir les familles génériques ? close

Notre programmeur peut être sûr d'une chose c'est que sur toutes les machines il y aura une police de chaque famille générique. Il a donc besoin d'un système qui lui permette de choisir une police spécifique et aussi une police générique au cas où cette police spécifique ne serait pas là. Ce système c'est le CSS à travers le fonctionnement de la propriété font-family qui va le lui fournir.

# La propriété font-family close

Comment fonctionne la font-family ? Le programmeur propose une liste de polices. Par exemple celle ci dessous. Si le navigateur peut utiliser la police Courier New il le fait. Sinon il essaie de charger la Courier. Si à nouveau il ne peut pas il va charger une police de la même famille générique c'est à dire une police monospace.

Font-family avec une liste de polices

Dans un exemple on va utiliser font-family et demander une famille générique pour voir quelle police le navigateur va charger.

Si je prends les outils webmaster Google je peux constater que le navigateur va aller chercher la police qui appartient à la famille générique que j'ai demandé.

On a donc un mécanisme qui nous permettra de charger "la meilleure police" possible parmi celles que l'on a demandé.

On va regarder pour chaque familles génériques quelle police le système nous propose.

# Les polices Web Safe close

Une police Web Safe qu'est ce que c'est ? C'est en fait une liste de polices avec à chaque fois une police spécifique, éventuellement une police de substitution et enfin une police générique. Cette liste est considérée comme sure c'est à dire qu'en choisissant cette liste vous êtes sûr d'avoir un rendu optimal quelle que soit la machine qui chargera votre page.

Ci dessous je vous donne un tableau avec les Web Safe les plus utilisées.

Arial, Helvetica, sans-serif
Verdana, Geneva, sans-serif
Georgia, serif
"Times New Roman", Times, serif
"Comic Sans MS", cursive
"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace

# Importer des Google Fonts close

Les solutions présentées précédemment sont très limitées notamment lorsque l'on veut utiliser des polices cursives. Heureusement Google fournit un mécanisme pour importer des polices.

Il suffit de taper les mots-clés Google Fonts, et d'aller sur le site Google Fonts.

On va choisir de sélectionner des polices cursives. On choisit la police Cookie en cliquant sur le plus en haut à droite.

Sélection d'une Google Font

Puis on va dans notre "panier" pour récupérer les paramètres de la police Cookie.

Sélection d'une Google Font

On coupe et on colle le lien d'importation et on ajoute le nom de la police dans la font-family. L'exemple est ici. On vérifie et c'est fini !!