Chapitre suivantIndex des CoursChapitre prcedentChapitre 6

Les polices Web.

 

Les polices Web.
  1. Principe des polices Web
  2. Intégration d'une police Web
  3. Les propriétés d'une police
  4. Utilitaires et polices gratuites

    Principe des polices Web.

    L'intégration des polices Web dans une page HTML est un soulagement pour un bon nombre de webmasters. En effet avec ce système, votre page s'affichera avec la police désirée pour tous les navigateurs, car la police est fournie avec la page lors du téléchargement de celle-ci.
    Cependant Microsoft et Netscape ont une vision différente, pour Microsoft on parle de polices intégrées (OpenType) tandis que pour Netscape se sont des polices dynamiques (TrueDoc).

    Intégration d'une police Web.

    Cette intégration se réalise à l'aide de l'élément @font-face (cet élément existe aussi pour les feuilles de styles).
    Attention : Si la taille de votre police est importante, cela ralentira l'affichage de vos pages.

    Schéma type d'une intégration d'une police dans une page Web. A intégrer entre les balises <HEAD> ET </HEAD> de votre page HTML. 

     <STYLE TYPE="text/css"> 
    <!-- 
    @font-face 
    { 
    propriété: valeur; propriété: valeur; 
    } 
    //--> 
    </STYLE>

    Voici en exemple obéissant au schéma ci-dessus. 

     <STYLE TYPE="text/css"> 
    <!-- 
@font-face 
{ 
font-family: "Garamond"; src: url(police/garamond); format: (opentype); 
} 
//-->
</STYLE>

    Dans cet exemple l'élément @font-face télécharge la police nommée Garamond (depuis le répertoire police), qui est une police OpenType (Microsoft).

    Note : La propriété src peut prendre la valeur local pour rechercher la police sur l'ordinateur de vos visiteurs avant de la télécharger depuis le serveur.

    ex : src: local(garamond); url(police/garamond);

    Les propriétés d'une police.

    Voici un tableau résumant les propriétés et valeurs d'une police. A noter qu'il est possible de fournir différentes descriptions pour une famille de police unique.

Propriété Valeur(s) Description
font-familly Arial, Verdana, ... Nom de la Famille
font-style norma, italic, oblique Style d'écriture
font-variant normal, small-caps Normale, petite majuscule
font-weight all, normal, bold, et valeurs de 100 à 800 Poids de la police
font-size all, length Taille fournie de la police


Utilitaires et polices gratuites.

Voici quelques liens ou vous trouverez des polices gratuites à utiliser dans vos pages Web et des utilitaires.

 

Chapitre prcedentIndex des CoursChapitre suivant

Révisé le :21-Jan-2009|©2009 www.technologuepro.com