CSS3 – Intégration de polices

LEÇON

 

Principes de base

Avec la règle @font-face on a la possibilité d'intégrer, dans une page web, une police de caractère qui n'est pas forcement présente sur la machine du client.

On obtient (ou on crée) le fichier descriptif de la police (un fichier binaire type TTF, OTF, WOFF ou autre format standard), puis on crée une référence vers ce fichier dans le CSS.

Pour créer cette référence, on utilise url('chemin') - un peu comme dans le cas d'un fichier graphique pour background-image.

Remarque : si on spécifie un chemin relatif pour un fichier de police, il est relatif au dossier ou se trouve le fichier CSS en question.

 

Exemple

Voici un exemple de déclaration de police dans un fichier CSS.

 

style.css


/* polices */

@font-face
{
    font-family: "Digital Dream";
    src: url('fonts/digital-dream-regular.ttf');
}

@font-face
{
    font-family: "Digital Dream";
    font-style: italic;
    src: url('fonts/digital-dream-italic.ttf');
}

@font-face
{
    font-family: "Digital Dream";
    font-weight: bold;
    src: url('fonts/digital-dream-bold.ttf');
}

@font-face
{
    font-family: "Digital Dream";
    font-weight: bold;
    font-style: italic;
    src: url('fonts/digital-dream-bold-italic.ttf');
}

/* styles */

h1
{
  font-family: "Digital Dream";
  font-weight: bold;
  font-size:24px;
}

.cc
{
  font-family: "Digital Dream";
}

 

EXERCICES

 

1. Télécharger les fichiers de la police (liens ci-dessous) et recréer le fichier CSS de l'exemple ci-dessus. Puis, créer un fichier HTML qui exploite le fichier CSS (on a le droit d'apporter des modifications au fichier CSS). Ensemble, les fichiers HTML et CSS devraient mettre en évidence les différentes possibilités de cette police (textes de différentes tailles, gras, italique, gras-italique, etc).

Voici les fichiers TTF :

digital-dream-regular.ttf
digital-dream-bold.ttf
digital-dream-italic.ttf
digital-dream-bold-italic.ttf

[ Remerciements : Font Squirrel et Jakob Fischer (pizzadude.dk) ]