Formatage du texte

Pour modifier la taille du texte, on utilise la propriété CSSfont-size. Mais comment indiquer la taille du texte ? C'est là que les choses se corsent car plusieurs techniques vous sont proposées :
  • Indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque d'indiquer une taille trop petite pour certains lecteurs.
  • Indiquer une taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.

La taille absolute

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
font-size: 16px;

La taille relative

C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous les visiteurs.
Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci :
  • xx-small: minuscule ;
  • x-small: très petit ;
  • small: petit ;
  • medium: moyen ;
  • large: grand ;
  • x-large: très grand ;
  • xx-large: euh… gigantesque.
Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS :
p
{
font-size: small;
}
h1
{
font-size: large;
}
Ah… La police… On touche un point sensible.
En effet, il se pose un problème : pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.
La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur. Je vous expliquerai dans un second temps comment faire cela.
balise
{
font-family: police;
}
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

Utiliser une police personnalisée avec@font-face

Pendant longtemps, cela n'était pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des navigateurs.

Mais attention, il y a des défauts (ce serait trop beau sinon) :

Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la police, dont le poids peut atteindre, voire dépasser 1 Mo…

La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui proposent en téléchargement un certain nombre de polices libres de droits. Je recommande en particulier fontsquirrel.com car il permet de télécharger des packs prêts à l'emploi pour CSS 3.

Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les navigateurs.

Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître :
  • .ttf: TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
  • .eot: Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft.
  • .otf: OpenType Font. Ne fonctionne pas sur Internet Explorer.
  • .svg: SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.
  • .woff: Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.
En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci :
@font-face {
font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot') format('eot'),

url('MaSuperPolice.woff') format('woff'),
url('MaSuperPolice.ttf') format('truetype'),
url('MaSuperPolice.svg') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
font-family: 'MaSuperPolice', Arial, serif;
}
La première (grosse) section @font-face permet de définir un nouveau nom de police qui pourra être utilisé dans le fichier CSS. Ensuite, nous utilisons ce nom de police avec la propriété font-family, que nous connaissons, pour modifier l'apparence des titres <h1>.
Concrètement, en CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :
  • italic: le texte sera mis en italique.
  • oblique: le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit).
  • normal: le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique
Et si nous passions à la mise en gras ?
Alors, là encore, n'oubliez pas que ce n'est pas <strong> qui permet de mettre en gras (son rôle est d'indiquer que le texte est important, donc le navigateur l'affiche généralement en gras). La mise en gras en CSS peut par exemple s'appliquer aux titres, à certains paragraphes entiers, etc. C'est à vous de voir.
La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :
  • bold: le texte sera en gras ;
  • normal: le texte sera écrit normalement (par défaut).
La propriété CSS associée porte bien son nom :text-decoration. Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :
  • underline: souligné.
  • line-through: barré.
  • overline: ligne au-dessus.
  • blink: clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).
  • none: normal (par défaut).
Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et justifié.
C'est tout simple. On utilise la propriété text-alignet on indique l'alignement désiré :
  • left: le texte sera aligné à gauche (c'est le réglage par défaut).
  • center: le texte sera centré.
  • right: le texte sera aligné à droite.
  • justify: le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.
J'imagine que, maintenant, la question qui vous brûle les lèvres est : « Mais quelle est donc la propriété magique qui fait flotter ? ».
La réponse est…float(« flottant » en anglais). Cette propriété peut prendre deux valeurs très simples :
  • left: l'élément flottera à gauche.
  • right: l'élément flottera… à droite ! Oui, bravo.
L'utilisation des flottants est très simple :
Vous appliquez un float à une balise.
Puis vous continuez à écrire du texte à la suite normalement.
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous du flottant et non plus à côté ». C'est la propriétéclear, qui peut prendre ces trois valeurs :
  • left: le texte se poursuit en-dessous après un float: left;
  • right: le texte se poursuit en-dessous après un float: right;
  • both: le texte se poursuit en-dessous, que ce soit après un float: left;ou après un float: right;.
  • On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels (16px), en « em » (1.3em), en pourcentage (110%), etc.
  • On change la police du texte avec font-family. Attention, seules quelques polices sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la directive@font-face: cela forcera les navigateurs à télécharger la police de votre choix.
  • De nombreuses propriétés de mise en forme du texte existent :font-style pour l'italique,font-weight pour la mise en gras,text-decorationpour le soulignement, etc.
  • Le texte peut être aligné avectext-align.
  • On peut faire en sorte qu'une image soit habillée (« entourée ») de texte avec float