Propriétées des Fontes de caractères.
1.Par modification des caractéristiques des tags Html.
Prenons
l'exemple du tag BODY, ce tag permet déjà en html normal de fixer la
couleur et l'image de fond d'une page, la couleur du texte, les attributs des
Links, nous allons lui appliquer une série de commandes CSS. Ces commandes
s'appliqueront à tout le corps de la page, donnant ainsi les conditions par
défaut.
Choix de la
fonte, exemple : Times new roman, Arial, Verdana, etc
On peut
inscrire ces commandes dans l'en-tête de la page, après le tag Title, entre
les tags :
<STYLE>
</STYLE>
La commande Css est fontFamily comme dans :
Body {font-family: Arial;}
Exercice :
dans le cadre ci dessous, écrire entre les deux tags
<style>et </style> :
Body{font-family : Arial}
Attention les parenthéses sont cursives. Deux points :
sépare la commande du nom de la fonte.
Cliquez sur le bouton : "Afficher la page", une
fenêtre de résultat doit apparaitre ou figure le texte que vous avez frappé,
affecté de la Fonte Arial.
Essayez diverses fontes parmi celles installées sur votre
ordinateur, exemple: Arial black, Verdana, Times New Roman, etc... , en
changeant la désignation de la Font dans le style , exemple :
Body{font-family : Arial black}
et observez les changements dans la fenêtre de résultat.
Essayez de taper ces instructions, sinon cliquez Correction
Pour tenir compte du fait que vous ne connaissez pas
exactement le type de fontes installées sur les ordinateurs des consultants de
vos pages, vous pouvez spécifier plusieurs types de fontes parmi les plus
courantes, exemple :
Body{font-family : Arial, Verdana, Helvetica}
En premier vous mettrez la fonte qui à votre, avis convient
le mieux à votre page, c'est celle qui sera utilisée si elle existe sur
l'ordinateur du consultant, sinon ce sera la deuxième, etc... Si aucune des
fontes n'existent sur l'ordinateur consultant, la fonte par défaut de cet
ordinateur, (police par défaut), sera utilisée. Les plus courantes semble-t-il
sont Arial, Verdana, Helvetica, Times New Roman.
La possibilité existe de charger une fonte spécifique, je
n'en parle pas pour l'instant dans ce tutorial, n'ayant pas moi-même fait cette
expérience.
2.
Taille.
La commande pour définir la taille
du texte est : font-size.
La syntaxe la plus commode est de
définir la taille du texte en points comme ceci : font-size : 20pt
Ecrire entre les tags style :
Body{font-size : 20pt}
Ecrire un texte dans le corps de la
page. Essayer suivant la maniére précédente. Essayer avec différentes
tailles de texte, entre 8pt et 72pt par exemple.
Mixer les commandes.
Pour concaténer les commandes, on
les sépare par un point-virgule.
Exemple : Body{font-family : Arial ;
font-size : 20pt}
Exercice : essayer différentes
combinaisons entre les fontes et les tailles de caractères. Corrigé.
3. Italique et Gras.
Italique / Normal
Commande : font-style
Paramêtres : normal, italic
Exemple : Body{font-style:
italic} , mise du texte en italique
Exercice : Par la méthode
précédente mettre un texte en italique. Corrigé
Gras / Normal
Commande : font-weight
Paramêtres : normal, bold
Exemple : Body{font-weight :
bold} , mise du texte en gras
Exercice : Par la méthode
précédente mettre un texte en gras. Corrigé
Exercice: fonte Arial, taille 15pt,
gras et italic, n'oubliez pas de séparer les commandes par un ; Corrigé.
Exercice: fonte Verdana, taille 22pt,
gras. Corrigé
Exercice: fonte Times New Roman,
taille 72pt, Italique. Corrigé
![]() |
Sommaire | ![]() |
Précédent | ![]() |
Suivant |