Choix des polices de caractères

Ils existent 5 familles de polices de caractères dites "génériques" :

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

La différence entre Sans-serif et Serif est montrée dans l'image suivante:

• La famille Serif se caractérise par l'"empattements"
• La famille San-Serif se caractérise par l'absence d'"empattements"
• La famille Monospace se caractérise par une chasse ou avance fixe

Quelques polices de caractères standards

Propriétés pour déclarer les fontes

font-family: "Choix 1", choix2, "Choix 3", générique;

body { font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; }
ou
body { font-family:TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; }

@font-face  { font-family: "old english"; src: url(/fonts/old_english_five.ttf); }
p           { font-family: 'old english', "Times New Roman", Georgia, serif; }

Les propriétés de fonte

 { font-style: normal | italic | oblique }

 { font-weith: normal | 100 à 900 | bold | bolder | lighter }

 { font-variant: normal | small-caps }

 { font-size: taille (em, px,etc.) | % (pourcentage | xx-large | x-large | larger |   }
 { font-size: large | medium | small | smaller | x-small | xx-small   }

Les propriétés de texte

text-align

La propriété text-align permet de spécifier l'alignement horizontal du texte.

 { text-align: left | center | right | justify  }

text-indent

Text-indent: définit un retrait de première ligne.
La propriété text-indent peut pendre une valeur numérique positive ou négative suivie de px ou % ou pt ou em. 0 est la valeur par défaut.

 { text-ident: [valeur] | [valeur]% | inherit  }

p   { text-indent:8em; }

p   { text-indent:-8em; padding-left:8em; }

p   { text-indent:8em; direction:rtl; }

text-decoration

Le clignotement (blink) a été supprimé des navigateurs

 { text-decoration: none | overline | underline | line-through }

text-transform

La propriété text-transform définit la casse du texte, uppercase (majuscule), lowercase(minuscule) ou capitalize, et permet de modifier la "capitalisation" ( Majuscule Minuscule ) d'un bloc texte.

 { text-transform: capitalize | uppercase | lowercase | none }

text-shadow

text-shadow est une propriété permettant de produire une ombre portée sur le texte de contenu sur lequel elle est appliquée.
Il est possible de spécifier les décalages de l'ombrage, la couleur et sa zone de flou.
Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même.
L'ombrage n'affecte pas la taille de la boîte de texte.

text-shadow: h-shadow v-shadow blur color;

• h-shadow (obligatoire) est la position horizontale de l'ombre. Une position négative est permise.
• v-shadow (obligatoire) est la position verticale de l'ombre. Une position négative est permise.
• blur (optionnel) est la largeur du flou.
• color est la couleur de l'ombre.

 { text-shadow:0.1em 0.1em 0.05em #333; color:black; }
 { text-shadow:0.1em 0.1em 0.2em black; color:white; }

Il est aussi possible d'avoir des ombres multiples:

 { text-shadow:text-shadow:0.2em 0.5em 0.1em #600, 
                          -0.3em 0.1em 0.1em #060,
                           0.4em -0.3em 0.1em #006; }

Ou bien d'avoir un effet de relief ou de gravure

  { text-shadow:-1px -1px white, 1px 1px #333; color:#cccccc; }

  { text-shadow:1px 1px white, -1px -1px #444; color:#cccccc; }

Si on met une ombre directement derrière le texte, c'est-à-dire, avec la compensation zéro, l'effet doit créer un rougeoiement autour des lettres. Si le rougeoiement d'une ombre seule n'est pas assez intense, répétez juste la même ombre à plusieurs reprises :

.a  { text-shadow:0 0 0.2em #F87; }
.b  { text-shadow:0 0 0.2em #F87, 0 0 0.2em #F87; }
.c  { text-shadow:0 0 0.2em #F87, 0 0 0.2em #F87, 0 0 0.2em #F87; }

Un effet de feu facile!

  { text-shadow:0 0 4px white, 
           0 -5px 4px #FFFF33, 
           2px -10px 6px #FFDD33, 
           -2px -15px 11px #FF8800, 
           2px -25px 18px #FF2200; color: #000; }

word-spacing

Word-spacing: définit l’espace entre les mots, en point, inch, centimètres, pixels, pourcentage. Les valeurs négatives sont permises.

 { word-spacing: normal | [valeur] }

p      { word-spacing:2em; }

word-wrap

La propriété word-wrap est utilisée pour définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue pour ne pas dépasser.
word-wrap Détermine le style de renvoi à la ligne pour les éléments de niveau bloc, les éléments incorporés de taille spécifique ou les éléments positionnés.
Si un mot unique (sans espace blanc) dépasse la largeur du cadre qui contient l'élément, le comportement normal consiste à étendre le contenu au delà de la largeur normale du cadre, sans retour à la ligne. Vous pouvez cependant utiliser la valeur de break-word pour forcer la césure d'un mot long au niveau du caractère qui se trouve au bord du cadre.

 { word-wrap: normal | break-word }

p      { word-wrap:break-word; }

Depuis 2012, la propriété word-wrap a été remplacée par la propriété overflow-wrap au sein des spécifications CSS3 mais doit demeures compatible sur tous les navigateurs à venir.

word-break

La propriété CSS word-break est utilisée pour définir comment (ou si) réaliser la césure des mots.

 { word-break: normal | break-all | keep-all  }

• Normal → Utilise les règles de césure par défaut.
• break-all → Des césures peuvent être insérées entre n'importe quel caractère pour les textes.
• keep-all → Ne permet pas la césure pour les textes.

overflow

 { overflow: visible | hidden | scroll | auto  }

• visible → rend visible tout ce qui dépasse.
• hidden → cache tout ce qui dépasse.
• scroll → met toujours une barre de défilement horizontale et verticale.
• auto → met une barre de défilement horizontale ou verticale si besoin.

white-space

La propriété CSS white-space est utilisée pour décrire comment sont gérés les espaces et les retours à la ligne à l'intérieur d'un élément, ainsi que la justification automatique.
Cela définit comment les espaces et les retours chariot doivent être affichés. En temps normal, les navigateurs n'affichent pas les retours à la ligne ni les espaces successifs qui se trouvent dans le code source HTML.
On peut cependant utiliser la balise <br/> pour forcer un retour à la ligne ou l'entité &nbsp; pour générer un espace mais la propriété White-Space offre une solution plus élégante.

 { white-space: normal | pre | nowrap | pre-wrap | pre-line  }

• normal → Les suites d'espaces sont fusionnées. Les caractères de retour à la ligne dans la source sont considérés comme des espaces. Des ruptures de lignes seront automatiquement ajoutées pour les besoins de la justification.
• pre → Les suites d'espaces sont préservées, et les ruptures de ligne ont lieu à la présence de caractères de retour à la ligne dans la source ou d'éléments <br>.
• nowrap → Fusionne les espaces comme normal, mais n'ajoute pas de rupture de ligne automatique (justification automatique).
• pre-wrap→ Les suites d'espaces sont préservées. Les ruptures de lignes ont lieu, d'une part manuellement à la présence d'un caractère de retour à la ligne ou d'éléments <br>, et d'autre part automatiquement pour les besoins de la justification.
• pre-line→ Les suites d'espaces sont fusionnées. Les ruptures de lignes ont lieu, d'une part manuellement à la présence d'un caractère de retour à la ligne ou d'éléments <br> et d'autre part automatiquement pour les besoins de la justification.

letter-spacing

letter-spacing: définit l'espacement entre les caractères à l'intérieur d'un élément, en point, inch, centimètres, pixels, pourcentage. Les valeurs négatives sont permises.

 { letter-spacing: normal | [valeur] }

p      { letter-spacing:5px; }

line-height

La propriété line-height: détermine la hauteur des lignes au sein d'un élément. Cette propriété est différente de font-size, dans le sens ou la hauteur des lignes est différente de celle des textes, ceux-ci étant disposés suivant la définition de la taille des lignes.

Si la taille des lignes est inférieure à celle du texte, les textes se superposeront légèrement lors des retours à la ligne.
A l'inverse si la taille des lignes est plus grande l'espace entre les lignes sera plus important.
Remarque : la propriété font-size détermine la taille exacte des majuscules pour une police (pas les minuscules).

On utilise souvent la propriété line-height pour centrer verticalement du texte dans un conteneur : lorsque la valeur de la propriété line-height est supérieure à celle de font-size, l'écart de hauteur résultant se réparti de façon homogène au dessus et en dessous du texte, celui-ci étant donc centré verticalement.

 { line-height: normal | [valeur] (px, em ...) | nombre | [valeur]% }

Les unités spécifiques applicables pour valoriser la propriété line-height sont :

• valeur avec une unité spécifique (ex : line-height:2em; line-height:30px;)
• valeur sans unité : la taille sera le produit de cette valeur avec la taille de la police du texte
• pourcentage : la taille sera le produit du pourcentage avec la taille de la police du texte

Exemple de rendu sans employer la propriété line-height :

div      { width:560px; height:40px; }

Le même exemple avec la propriété line-height valorisée :

div      { width:560px; height:40px; line-height:40px; }

Exemple de texte centré dans une div carrée :

div      { width:80px; height:80px; line-height:80px; }

div      { width:560px; height:auto;  font-size:14px; line-height:10px; }

vertical-align

La propriété vertical-align:permet de gérer l'alignement vertical du texte.
Les valeurs négatives sont autorisées.

 { vertical-align: auto | baseline | bottom | central | middle | sub | super }
 { vertical-align: [valeur][unité] | [valeur]% |text-bottom | text-top | inherit }

Quelques exemples

span  { vertical-align:4px; font-size:70%; }

<p>Texte normal <span>en exposant</span> normal</p>

span  { vertical-align:-3px; font-size:70%; }

<p>Texte normal <span>en indice</span> normal</p>

Sur les exemples ci-dessous, la propriété Text-Align est utilisée pour positionner le contenu à l'intérieur d'une cellule d'un tableau.

Sur les exemples ci-dessous, la propriété Vertical-Align est appliquée à des parties de texte en rouge (balise <span>).

Vertical-Align:Baseline; (valeur par défaut)

Vertical-Align: Middle;

Vertical-Align: Sub;

Vertical-Align: Super;

Vertical-Align: Top;

Vertical-Align: Text-Top;

Vertical-Align: Bottom;

Vertical-Align: Text-Bottom;

Vertical-Align: 30px;

Vertical-Align: -80%;

Sur les exemples ci-dessous, la propriété Vertical-Align est appliquée aux deux images (balise <IMG>).