SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
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 
éléments pour structurer le texte, mais aussi par exemple tous les repères pour les 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.
 |
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 du
Formatage de police avec fichier de polices.
<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> |
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.
|
|
font-style (Style de police)Le style de police désigne l'orientation de la police.
<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>
|
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.
|
|
font-variant (Variante de police)Comme variante de police particulière existent les capitales (petites majuscules).
<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> |
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.
|
|
font-size (Taille de police)La taille de police est la taille dans laquelle elle sera représentée.
<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> |
Avec font-size: vous pouvez spécifier la taille de police. Une 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.
Vous pouvez combiner la mention de la taille de police avec la mention de la hauteur de ligne, en notant les deux mentions dans la propriété 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.
|
|
font-weight (Graisse de police)La graisse de police correspond à l'état plus ou moins gras dans lequel la police est représentée.
<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> |
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).
Il n'y a pour ainsi dire aucune police installée qui supporte toutes les mentions permises relatives à la graisse de police.
|
|
font-stretch (Étirement de la police)L'étirement de la police mentionne à quel point la police paraît étroite ou large.
<html><head><title>font-stretch</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p><span style="font-stretch:wider">petit texte d'exemple avec un étirement plus large (wider)</span><br> <span style="font-stretch:wider; font-size:200%">grand texte d'exemple avec un étirement plus large (wider)</span></p> <p><span style="font-stretch:narrower">petit texte d'exemple avec un étirement plus serré (narrower)</span><br> <span style="font-stretch:narrower; font-size:200%">grand texte d'exemple avec un étirement plus serré (narrower)</span></p> <!--etc...--> </body></html> |
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.
Cette propriété n'est pas encore interprétée par les navigateurs répandus.
|
|
font (Police en général)Cette mention est un résumé des mentions distinctes facultatives suivantes:
font-family
font-style
font-variant
font-size
font-weight
line-height
<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>
|
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.
|
|
word-spacing (Espace des mots)Avec cette mention, vous pouvez spécifier l'espace entre les mots dans le texte.
<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> |
Avec word-spacing: vous pouvez déterminer l'espace entre les mots. Une mention
numérique est permise, mais cependant aucune en pourcentage.
Cette mention n'est pas encore interprétée par tous les navigateurs.
|
|
letter-spacing (Espace des signes)Avec cette mention vous pouvez spécifier l'espace entre les lettres ou signes dans le texte.
<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ères de 1pt</span><br> <span style="letter-spacing:2pt">Texte d'exemple avec espacement des caractères de 2pt</span><br> <!--etc...--> </p> </body></html> |
Avec letter-spacing: vous pouvez spécifier l'espacement de la police.
Une mention
numérique est permise, mais cependant aucune en pourcentage.
Cette mention n'est pas encore interprétée par Netscape 4.x .
|
|
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é.
<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>
|
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).
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.
|
|
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.
<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).
L'Explorer Internet 4.x n'interprète pas encore la mention capitalize.
|
|
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.
<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> |
Avec color: vous pouvez spécifier la couleur du texte. Les mentions de couleur sont permises.
Pour la définition de couleurs vous pouvez utiliser l' instrument de choix de couleur de SELFHTML.
|
|
text-shadow (Ombrage du texte)Avec cette mention vous pouvez créer un effet d'ombre pour le texte.
<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>
|
Avec text-shadow: vous pouvez imposer un ombrage au texte. Les mentions de couleur ou bien la valeur none pour "aucune ombre pour le texte" sont permises.
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.
|
| |
 |
Formatage de police avec fichier de polices
|
 |
Unités de mesure, mentions de couleur et affectation de valeurs
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
