Formatage de la police : propriété CSS font-family

Dans ce chapitre vous allez avoir affaire à la police Quoi ? Quelqu'un a dit police ?!! Sauve qu'il peut Ha haha ! Vous vous êtes fait avoir comme des bleus Je parlais juste de la police des caractères On trouve pas ça drôle Allez, balancez-nous le truc !

Très bien les gars, on s'est bien amusés. Maintenant mettons nous au boulot. Premièrement on désigne par le formatage du texte la modification et la mise en forme du texte (couleur, taille et graisse de la police, espaces entre caractères ou mots etc..). Dans ce chapitre je vais vous filer uniquement la propriété CSS font-family. Les autres sont à traiter dans les chapitres à venir

• Introduction à la propriété CSS font-family (famille de polices)

• Les familles de polices générique

• Les familles de polices génériques serif et sans-serif et la définition des empattements

• Les polices communes ou sécurisées

• Les polices sous Dreamweaver

• Police par défaut

• Accéder au dossier fonts des polices sous Windows

Introduction à la propriété CSS font-family (famille de polices)

Cette propriété de style permet d'indiquer au navigateur quelle police utiliser. On peut lui assigner plusieurs noms de familles de polices (Arial, Helvetica, Arial Black etc.) séparés par des virgules, et en dernier lieu on met le nom d'une famille générique (serif, sans-serif etc.) comme suit :

H3 {
font-family: Arial, Helvetica, "Arial Black", serif;
}

Ceci signifie que le navigateur va chercher en premier lieu la police Arial, s'il ne l'a trouve pas, il se lancera dans la quête de la police Helvetica, si elle fait défaut dans le dossier des fontes du visiteur, il va utiliser Arial Black, sinon il va employer une police standard dans la famille serif.

Donc faites attention à l'ordre et n'oubliez pas que si votre police contient plus d'un mot. Il faut l'entourer par des guillemets doubles "Arial black" ou des guillemets simples 'Arial Black', mais si vous définissez vos polices par l'attribut style, vous devez entourer votre police par guillemets simples afin d'éviter les conflits, car ce que vous allez affecter à l'attribut style sera mis entre "" :

<p style="font-family: Arial, 'Arial Black';"> votre texte </p>

On est obligé de mettre 'Arial Black' et non "Arial Black", car les guillemets doubles sont déjà utilisés par l'attribut style.
Vous feriez mieux d'affecter plusieurs polices (même si une peut suffire) à la propriété de style font-family plus le nom d'une famille de polices générique (serif, sans-serif etc.), pour augmenter les chances de tomber sur une qui est présente dans l'ordinateur du visiteur.

Les familles de polices générique

• serif : une famille de polices avec empattements. Exemples de la famille serif : Cambria, Georgia, Times New Roman, MS Serif etc. ;
• sans-serif : une famille de polices sans empattements (extrémités simples et droites). Exemples de la famille sans-serif : Arial, Arial Black, Helvetica, Verdana, Trebuchet MS, Tahoma, Impact, Calibri etc. ;
• cursive : une famille de polices pour écriture manuscrite (polices un petit peu penchées en avant : en italique par nature, mais vous pouvez encore leur appliquer un style italique pour augmenter leur inclinaison en avant), exemples de polices : Chancery, Script, Brush etc. ;
• fantasy : une famille de polices pour écriture originale (polices dotées de style décoratif), exemples de polices : Critter, Rosewwod, Algerian, Western etc. ;
• monospace : une famille de polices avec des signes Courier (caractères dotées de largeurs fixes), exemples de polices : Courier, MS Courier New, Prestige, Lucida, etc.

Notez que chaque famille de polices générique enveloppe plusieurs noms de familles (appelés couramment polices) qui ont en commun des aspects uniformes. Par exemple la famille générique serif englobe des polices qui ont des empattements.

Les familles de polices génériques serif et sans-serif et la définition des empattements

Les deux premières familles sont les plus courantes dans le web. La différence qui existent entre ces deux familles est la présence ou non des empattements : petites extensions qui forment la terminaison des caractères, ou si vous voulez les traits horizontaux qui terminent les jambages des lettres.

Voici un aperçu des deux familles (Arial appartient à la famille sans-serif : caractères à bâton, Georgia fait partie de la famille serif : caractères avec empattements) :

Il est communément admis que les fontes à empattements (polices serif) sont plus lisibles sur papier et plus adaptées à l'impression. Alors que les fontes sans empattements (polices sans-serif) sont plus agréables à lire sur un écran d'ordinateur. Pour d'autres, les écritures avec empattements sont plus lisibles pour les longs textes alors que celles sans empattements sont plus lisibles pour les éléments isolés.

Les polices communes ou sécurisées

Les polices les plus connues, et par conséquent les plus sécurisées sont : Arial, Arial Black, Courier New, Georgia, Impact, Times New Roman, Comic Sans MS, Trebuchet MS et Verdana. En voici des aperçus :

Texte en Arial Black.
Texte en Arial.
Texte en Courier New.
Texte en Georgia.
Texte en Impact.
Texte en Times New Roman.
Texte en Comic Sans MS.
Texte en Trebuchet MS.
Texte en Verdana.

Moi j'attache un grand intérêt à la police Trebuchet MS. D'ailleurs tout le site et orné avec elle.

Les polices sous Dreamweaver

Si vous travaillez vos CSS sous Dreamweaver, il vous propose les notations suivantes :

Arial, Helvetica, sans-serif;
"Times New Roman", Times, serif;
Georgia, Times New Roman, Times, serif;
Verdana, Arial, Helvetica, sans-serif;
Geneva, Arial, Helvetica, sans-serif;
"Courier New", Courier, monospace;

Remarquez bien ces notations. Elles finissent toujours par le nom d'une famille de polices générique, pour que le navigateur prend une police standard de cette catégorie dans le cas où les autres polices privilégiées n'ont pas étaient trouvées.

Si vous n'avez pas signalé le nom d'une famille et que la recherche des polices n'a pas aboutit, le navigateur va prendre la police utilisée par défaut dans sa configuration. Ce qui peut nuire potentiellement à la présentation de vos pages web.

Police par défaut

Chaque navigateur applique une police par défaut. Cependant la police spécifiée par l'auteur ou l'utilisateur permet d'écraser la police par défaut.

Notez que vous pouvez aussi modifier la police utilisée par défaut par le navigateur :

• sous Firefox et Netscape : menu Outils (Tools) / Options / Contenu (content) / Polices et couleurs. Notez que les deux navigateurs utilisent la police Times New Roman, avec une taille de 16 pixels ;
• sous Mozilla : menu Edition / Préférences / étendre le menu Apparence / Polices de caractères ;
• sous Microsoft Internet Explorer : menu Outils / Options internet (Internet options) / Polices (Fonts). Le navigateur Microsoft utilise par défaut la police Times New Roman ;
• sous Opera : menu Outils / préférences / Pages Web (Web Pages). Au même titre que les navigateurs précités. Opera utilise aussi par défaut la police Times New Roman ;
• sous Safari (je parle du navigateur développé par Apple pour la plateforme Windows) : menu Edition / Préférences / Aspect. Safari utilise aussi Times New Roman avec une taille de 16 pixels.

Le navigateur applique la police par défaut, dans le cas où aucune autre police n'est spécifiée.

Accéder au dossier fonts des polices sous Windows

Pour connaître les polices installées dans votre Windows : rendez-vous dans le dossier Windows puis ouvrez le dossier Fonts (pour les plus paresseux recopier l'URL suivante dans la barre d'adresse : "C:\WINDOWS\Fonts"). Deuxième méthode : cliquez sur le menu démarrer, puis panneau de configuration, enfin double-cliquez sur le dossier des polices :

Vous devez avoir sélectionné ce mode d'affichage, c'est-à-dire affichage classique et non pas affichage des catégories (zone encadrée par le vert).
Double-cliquez sur ce dossier pour accéder à toutes les polices installées dans votre Windows, Vous avez aussi la possibilité d'accéder à ce dossier en tapant tout simplement le mot "fonts" dans la commande Exécuter (run) qui se trouve dans le menu démarrer. Bref voici le dossier en question :

Maintenant ouvrez un fichier de police, pour voir son aperçu et d'autres informations utiles :

Pour ajouter d'autres fontes à votre système, c'est largement facile. Vous n'avez qu'à télécharger des polices depuis un site, puis glissez les fichiers téléchargés dans le répertoire de polices, et si vous voulez créer vos propres polices, c'est aussi possible, mais il faut s'approprier de logiciels spécialisés dans la création de fontes.

Ouf j'ai enfin terminé ce chapitre. Résultat : je suis totalement épuisé Bon, nous avons traité la police sous différents angles : CSS, Windows, Dreamweaver et navigateurs. J'espère que ce chapitre vous a un petit peu capturé. Très bien, passons au tuto suivant : le formatage de texte : les propriétés CSS font-size, font-weight, font-style, font-variant et font-stretch.