SELFHTML

Formatage de police

Page d'information: vue d'ensemble

vers le bas Généralités sur le formatage de police
vers le bas font-family (Famille de police)
vers le bas font-style (Style de police)
vers le bas font-variant (Variante de police)
vers le bas font-size (Taille de police)
vers le bas font-weight (Graisse de police)
vers le bas font-stretch (Étirement de la police)
vers le bas font (Police en général)
vers le bas word-spacing (Espace des mots)
vers le bas letter-spacing (Espace des signes)
vers le bas text-decoration (Décoration du texte)
vers le bas text-transform (Transformation du texte)
vers le bas color (Couleur du texte)
vers le bas text-shadow (Ombrage du texte)

 vers le bas 

Généralités sur le formatage de police

Sous le terme formatage de police, il faut comprendre les mentions concernant le genre de police, la taille de police, la graisse de police, les espaces entre les signes et les mots etc... Ces mentions se prêtent à tous les éléments HTML qui peuvent contenir du texte. En font partie tous les repères qui sont décrits dans le chapitre sur les Chapitre: vue d'ensemble éléments pour structurer le texte, mais aussi par exemple tous les repères pour les Chapitre: vue d'ensemble tableaux. Même sur l'élément body il est possible d'employer les mentions de feuilles de style énumérées ici - dans ce cas les mentions sont valables pour tous les éléments de texte de tout le fichier HTML.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 font-family (Famille de police)

Sous le terme famille de police, il faut comprendre les espèces de polices comme par exemple Arial, Helvetica, Times Roman etc... En font également partie des familles de police comme Sans Sérif etc...

Avec la commande décrite ici, vous pouvez mentionner des espèces de polices sans vous soucier comment et si la police peut être affichée chez l'utilisateur. Au cas où la police mentionnée ne peut pas être affichée, la mention reste sans effet. Une possibilité d'imposer des polices en mentionnant une certaine source de données de polices est décrite dans la partie traitant duAutre page d'information Formatage de police avec fichier de polices.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font-family</title>
<body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-family:'Times New Roman',Times,serif">petit texte d'exemple en
Times New Roman</span><br>
<span style="font-family:'Times New Roman',Times,serif;font-size:200%">grand texte d'exemple
en Times New Roman</span></p>

<p><span style="font-family:Verdana">petit texte d'exemple
en Verdana</span><br>
<span style="font-family:Verdana;font-size:200%">grand texte d'exemple en Verdana</span></p>

<!--etc...-->

</body></html>

Explication:

Avec font-family: vous pouvez spécifier une ou plusieurs polices. Si vous en mentionnez plusieurs, l'ordre dans lequel vous les mentionnez est déterminant: si la première est disponible, elle sera utilisée, sinon ce sera la deuxième au cas où elle est disponible etc...

Séparez les noms de polices par des virgules. Le consortium W3 recommande de mettre entre guillemets les noms de police qui contiennent des espaces, donc par exemple font-familiy:"Century Schoolbook",Times. Vous pouvez utiliser pour le faire les guillemets doubles ou le guillemet simple (apostrophe). Au cas où les propriétés CSS comme dans l'exemple ci-dessus sont placées dans un attribut style dans du code source HTML, elles ne peuvent pas utiliser les mêmes guillemets que ceux utilisés pour l'affectation de valeur à l'attribut HTML. Dans l'exemple ci-dessus, vous voyez que l'affectation de style est placée dans des guillemets doubles. À l'intérieur sont utilisés pour cette raison des guillemets simples pour 'Times New Roman', ce qui permet d'éviter les conflits.

Les familles de police génériques suivantes dont prédéfinies - Vous pouvez utiliser ces mentions à côté du nom de police:
serif = une famille de police avec empattement,
sans-serif = une famille de police sans empattement,
cursive = une famille de police pour écriture manuscrite,
fantasy = une famille de police pour écriture originale,
monospace = une famille de police avec des signes courrier.
Il est recommandé, de noter ces familles de polices comme dernière mention d'une affectation de valeur à font-family - comme dans le premier des exemples ci-dessus. Vous donnez ainsi la chance au navigateur de choisir une famille de police qui corresponde au moins au type de celle que vous désirez, au cas ou la police désirée ne peut pas être affichée.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 font-style (Style de police)

Le style de police désigne l'orientation de la police.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font-style</title>
<style type="text/css">
.italique { font-style:italic; }
.granditalique { font-style:italic; font-size:200%; }
</style>
<body bgcolor="#FFFFFF" text="#000000">

<p><span class="italique">petit texte d'exemple avec le style de police italique</span><br>
<span class="granditalique">grand texte d'exemple avec le style de police italique</span></p>

</body></html>

Explication:

Avec font-style: vous pouvez spécifier le style de police. Les données suivantes sont possibles:

italic = style de police italique.
oblique = style de police oblique.
normal = style de police normal.

 vers le hautvers le bas 

CSS 1.0MS IE 4.0 font-variant (Variante de police)

Comme variante de police particulière existent les capitales (petites majuscules).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font-variant</title></head>
<body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-variant:normal">petit texte d'exemple
avec la variante de police normale</span><br>
<span style="font-variant:normal; font-size:200%">grand
texte d'exemple avec la variante de police normale</span></p>

<p><span style="font-variant:small-caps">petit texte d'exemple
avec la variante de police petites capitales</span><br>
<span style="font-variant:small-caps; font-size:200%"> grand texte d'exemple avec la variante de police petites capitales</span></p>

</body></html>

Explication:

Avec font-variant: vous pouvez spécifier la variante de police. Les données suivantes sont possibles:

small-caps = petites capitales.
normal = variante de police normale.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 font-size (Taille de police)

La taille de police est la taille dans laquelle elle sera représentée.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font-size</title></head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="font-size:6pt">Texte d'exemple avec une taille de police de  6pt</span><br>
<!-- etc... -->
</p></body></html>

Explication:

Avec font-size: vous pouvez spécifier la taille de police. Une Autre page d'information mention numérique. est permise. Une mention en pourcentage est également permise. Les mentions en pourcentage se réfèrent à la taille de police de l'élément parent.

Les mentions "approximatives" suivantes sont aussi possibles et offrent une alternative aux données numériques:

xx-small =minuscule.
x-small = très petit.
small = petit.
medium = moyen.
large = grand.
x-large = très grand.
xx-large = géant.
smaller = visiblement plus petit que normal.
larger = visiblement plus grand que normal.

Attention:

Vous pouvez combiner la mention de la taille de police avec la mention de la Autre page d'information hauteur de ligne, en notant les deux mentions dans la propriété vers le bas font en respectant la syntaxe suivante (exemple): p { font:12pt/14pt }. Dans l'exemple la taille de police est de 12 points et la hauteur de ligne est de 14points. Pour cette façon de noter, le nombre placé avant la barre oblique désigne la taille de police et le nombre derrière la barre oblique, la hauteur de la ligne.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 font-weight (Graisse de police)

La graisse de police correspond à l'état plus ou moins gras dans lequel la police est représentée.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font-weight</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-weight:bold">petit texte d'exemple
avec un poids de police en gras</span><br>
<span style="font-weight:bold; font-size:200%">grand texte d'exemple
avec un poids de police en gras</span></p>

<!--etc....-->

<p><span style="font-weight:100">petit texte d'exemple
avec un poids de police 100</span><br>
<span style="font-weight:100; font-size:200%">grand texte d'exemple
avec un poids de police 100</span></p>

<!--etc...-->
</body></html>

Explication:

Avec font-weight: vous pouvez déterminer la graisse de la police. les mentions permises relatives à la graisse de la police:

bold = gras.
bolder = très gras.
lighter = plus fin.
100,200,300,400,500,600,700,800,900 = très fin (100) jusqu'à très gras (900)
. normal = graisse normale de police.

Pour les valeurs numériques la mention 500 correspond dans le domaine DTP au réglage habituel medium(moyen), et la mention 700 correspond au réglage bold(gras).

Attention:

Il n'y a pour ainsi dire aucune police installée qui supporte toutes les mentions permises relatives à la graisse de police.

 vers le hautvers le bas 

CSS 2.0 font-stretch (Étirement de la police)

L'étirement de la police mentionne à quel point la police paraît étroite ou large.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font-stretch</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-stretch:wider">petit texte d'exemple avec un &eacute;tirement plus large (wider)</span><br>
<span style="font-stretch:wider; font-size:200%">grand texte d'exemple avec un &eacute;tirement plus large (wider)</span></p>

<p><span style="font-stretch:narrower">petit texte d'exemple avec un &eacute;tirement plus serr&eacute; (narrower)</span><br>
<span style="font-stretch:narrower; font-size:200%">grand texte d'exemple avec un &eacute;tirement plus serr&eacute;  (narrower)</span></p>

<!--etc...-->
</body></html>

Explication:

Avec font-stretch: vous pouvez fixer l'étirement de la police. Les mentions suivantes sont possibles:

wider = plus large que normal.
narrower = plus serré que normal.
condensed = condensé.
semi-condensed = à moitié condensé.
extra-condensed = très condensé.
ultra-condensed = extrêmement condensé.
expanded = étendu.
semi-expanded = à moitié étendu.
extra-expanded = très étendu.
ultra-expanded = extrêmement étendu.
normal = étirement normal.

Attention:

Cette propriété n'est pas encore interprétée par les navigateurs répandus.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 font (Police en général)

Cette mention est un résumé des mentions distinctes facultatives suivantes:
vers le haut font-family
vers le haut font-style
vers le haut font-variant
vers le haut font-size
vers le haut font-weight
Autre page d'information line-height

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>font</title>
<style type="text/css">
#Texte01 { font:bold 12pt Times; }
#Texte02 { font:italic 1cm Helvetica; }
#Texte03 { font:small-caps 14pt Verdana; }
</style>
<body bgcolor="#FFFFFF" text="#000000">

<p id="Texte01">Texte d'exemple avec police: bold 12pt Times</p>
<p id="Texte02">Texte d'exemple avec police: italic 1cm Helvetica</p>
<p id="Texte03">Texte d'exemple avec police: small-caps 14pt Verdana</p>

</body></html>

Explication:

Avec font: vous pouvez mélanger différents formatages de police. Les mentions de valeur habituelles sont permises pour les propriétés de feuilles de style autorisées qui sont résumées dans font:. L'ordre des mentions n'a pas d'importance.

 vers le hautvers le bas 

CSS 1.0Netscape 6.0 word-spacing (Espace des mots)

Avec cette mention, vous pouvez spécifier l'espace entre les mots dans le texte.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>word-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="word-spacing:6pt">Texte d'exemple avec espacement des mots de 6pt</span><br>
<span style="word-spacing:8pt">Texte d'exemple avec espacement des mots de 8pt</span><br>
<!--etc...-->
</p>
</body></html>

Explication:

Avec word-spacing: vous pouvez déterminer l'espace entre les mots. Une Autre page d'information mention numérique est permise, mais cependant aucune en pourcentage.

Attention:

Cette mention n'est pas encore interprétée par tous les navigateurs.

 vers le hautvers le bas 

CSS 1.0MS IE 3.0Netscape 6.0 letter-spacing (Espace des signes)

Avec cette mention vous pouvez spécifier l'espace entre les lettres ou signes dans le texte.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>letter-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="letter-spacing:1pt">Texte d'exemple avec espacement des caract&egrave;res de 1pt</span><br>
<span style="letter-spacing:2pt">Texte d'exemple avec espacement des caract&egrave;res de 2pt</span><br>
<!--etc...-->
</p>
</body></html>

Explication:

Avec letter-spacing: vous pouvez spécifier l'espacement de la police. Une Autre page d'information mention numérique est permise, mais cependant aucune en pourcentage.

Attention:

Cette mention n'est pas encore interprétée par Netscape 4.x .

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 text-decoration (Décoration du texte)

Avec cette propriété vous pouvez apporter des formatages supplémentaires comme préciser si le texte doit être souligné ou barré.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>text-decoration</title>
<style type="text/css">
a:link { text-decoration:none; }
a:visited { text-decoration:line-through; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>
Vour connaissez certainement la <a href="../../../index.htm">page d'accueil à  SELFHTML</a><br>
Mais vous connaissez aussi les <a href="../../../cgiperl/modules/modulescpan.htm">modules CPAN</a>?<br>
ou bien les <a href="../../../divers/abrevlangues.htm">abréviations de langue</a>?
</p>

</body>
</html>

Explication:

Avec text-decoration: vous pouvez spécifier des formatages complémentaires. Les mentions suivantes sont possibles:

underline = souligné.
overline = ligne au dessus.
line-through = barré.
blink = clignotant.
none = normal (pas de décoration du texte).

Attention:

L'Explorer Internet MS n'interprète pas la mention blink. Netscape 4.x n'interprète pas encore la mention overline ce que fait pourtant Netscape 6.x.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 text-transform (Transformation du texte)

Avec cette mention vous pouvez imposer dans un passage de texte des minuscules, des majuscules ou des capitales indépendamment de la façon dont les lettres figurent effectivement dans le fichier.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>text-transform</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="text-transform:capitalize">petit texte d'exemple
avec transformation du texte capitalize</span><br>
<span style="text-transform:capitalize; font-size:200%">grand texte d'exemple avec transformation du texte capitalize</span></p>

<!--etc...-->

</body>
</html>

Avec text-transform: vous pouvez forcer une transformation du texte. Les données suivantes sont possibles:

capitalize = début des mots en majuscules.
uppercase = tout en majuscules.
lowercase = tout en minuscules.
none = normal (pas de transformation du texte).

Attention:

L'Explorer Internet 4.x n'interprète pas encore la mention capitalize.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 color (Couleur du texte)

Avec cette mention vous pouvez spécifier la couleur de premier plan pour le texte ou bien une couleur de police.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>color</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="color:blue">petit texte d'exemple avec la couleur <b>bleu</b></span><br>
<span style="color:blue;font-size:200%">grand texte d'exemple avec la couleur <b>bleu</b></span></p>

<!--etc...-->
</body></html>

Explication:

Avec color: vous pouvez spécifier la couleur du texte. Les Autre page d'information  mentions de couleur sont permises.

Astuce:

Pour la définition de couleurs vous pouvez utiliser l'Autre page d'information instrument de choix de couleur de SELFHTML.

 vers le hautvers le bas 

CSS 2.0 text-shadow (Ombrage du texte)

Avec cette mention vous pouvez créer un effet d'ombre pour le texte.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>text-shadow</title>
<style type="text/css">
#ombrerouge  { text-shadow:black; font-size:36pt; color:red; }
#ombrebleue { text-shadow:black; font-size:36pt; color:blue; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p id="ombrerouge">grand Texte rouge avec ombre noire</p>
<p id="ombrebleue">grand Texte noir avec ombre verte</p>

</body></html>

Explication:

Avec text-shadow: vous pouvez imposer un ombrage au texte. Les Autre page d'information mentions de couleur ou bien la valeur none pour "aucune ombre pour le texte" sont permises.

Attention:

Cette commande qui appartient à la version 2.0 des feuilles de style CSS n'est encore interprétée à l'heure actuelle par aucun des navigateurs répandus.

 vers le haut
page suivante Autre page d'information Formatage de police avec fichier de polices
page précédente Autre page d'information Unités de mesure, mentions de couleur et affectation de valeurs
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org