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


Code Exemple 1:

     

    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é.


Code Exemple 2:

     

              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é

Code Exemple 3:

           

 


Sommaire
Précédent Suivant