Styles de texte

Cette page vous donne plus d'exemples de styles de texte.

Vous modifierez votre feuille de style pour utiliser différentes polices.

Information : les styles de texte

CSS dispose de plusieurs propriétés pour les styles de texte.

Il existe une propriété raccourcie pratique, font, que vous pouvez utiliser pour spécifier plusieurs choses à la fois — par exemple :

Les styles gras, italique et petites majuscules (petites capitales)
La taille du texte
La hauteur de ligne
La police utilisée

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Exemple </caption>

p {font: italic 75%/125% "Comic Sans MS", cursive;}

Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.

La taille du texte est définie aux trois quarts de la taille dans l'élément parent de chaque paragraphe, et la hauteur de ligne à 125% (un petit peu plus espacé qu'habituellement).

La police choisie est Comic Sans MS, mais si celle-ci n'est pas disponible le navigateur utilisera sa police cursive (écriture à la main) par défaut.

La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à normal).

Polices

Il n'est pas possible de prédire les polices que les lecteurs de votre document auront. C'est pourquoi, lorsque vous spécifiez une police, il est utile de donner une liste d'alternatives, dans l'ordre de préférence.

À la fin de la liste, indiquez l'un des types de polices génériques par défaut : serif, sans-serif, cursive, fantasy ou monospace. (Celles-ci correspondent souvent à des paramètres définis dans les options de votre navigateur.)

Si la police ne permet pas d'afficher certaines parties du document, le navigateur peut lui substituer une autre police. Par exemple, le document peut contenir des caractères spéciaux qui ne sont pas définis dans la police. Si le navigateur arrive à trouver une autre police qui dispose de ces caractères, il utilisera celle-ci.

Pour spécifier une police particulière, utilisez la propriété font-face.

Taille de police

Les lecteurs utilisant des navigateurs Mozilla peuvent choisir la taille de police par défaut dans les options et changer la taille du texte pendant la lecture d'une page, il est donc recommandé d'utiliser des tailles de police relatives où c'est possible.

Vous pouvez utiliser certaines valeurs prédéfinies pour la taille, comme small, medium et large. Vous pouvez également utiliser des valeurs relatives à la taille de police de l'élément parent, comme ceci : smaller, larger, 150% ou 1.5.

Si nécessaire, vous pouvez spécifier une taille précise, comme : 12px (12 pixels) pour un dispositif d'affichage ou 12pt (12 points) pour une imprimante. Cette taille est théoriquement la largeur d'une lettre m, mais la manière dont la taille visible est liée à la taille spécifiée dépend d'une police à l'autre.

Pour spécifier une taille de police particulière, utilisez la propriété font-size.

Hauteur de ligne

La hauteur de ligne spécifie l'espacement entre les lignes. Si votre document dispose de longs paragraphes s'étalant sur de nombreuses lignes, un espacement plus grand que d'habitude peut le rendre plus facile à lire, particulièrement si la taille de police est petite.

Pour spécifier une hauteur de ligne particulière, utilisez la propriété line-height.

Décoration

La propriété séparée text-decoration permet de spécifier d'autres styles, comme underline (souligné), ou line-through (barré). Vous pouvez la définir à normal pour enlever explicitement toute décoration.

Autres propriétés

Pour spécifier l'italique, utilisez font-style: italic;
Pour spécifier le gras, utilisez font-weight: bold;
Pour spécifier de petites majuscules, utilisez font-variant: small-caps;

Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur normal ou inherit.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Plus de détails </caption>

Vous pouvez spécifier des styles de texte de bien d'autres manières.

Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.

Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie font, à cause de ses effets de bord (mise à zéro des autres propriétés).

Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez Fonts dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section Text.

Action : spécification de polices

Pour un document simple, vous pouvez définir la police sur l'élément BODY, et tout le reste du document en héritera.

Éditez votre fichier CSS. Ajoutez cette règle pour changer la police globale. Le haut du fichier CSS est un endroit logique pour ce faire, mais la règle a le même effet où qu'elle soit placée :

body {font: 16px "Comic Sans MS", cursive;}

Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.

Actualisez dans votre navigateur pour en voir l'effet. Si votre système dispose de Comic Sans MS, ou d'une autre police cursive qui ne supporte pas l'italique, votre navigateur choisira une police différente pour le texte en italique à la première ligne :

Cascading Style Sheets

Depuis la barre de menus, choisissez Affichage – Taille du texte – Plus grande. Bien que vous ayez spécifié précisément 16 pixels dans le style, un utilisateur lisant le document peut en changer la taille.

<caption style="font-weight:bold; text-align:left;">Challenge </caption>

Sans rien changer d'autre, rendez les six lettres initiales deux fois plus grandes que la taille normale dans la police serif par défaut du navigateur :